在pc端四个小图标显示，在手机端，只有一个小图标，点击小图标，四个小图标出来，再点击，四个小图片隐藏？

最新推荐文章于 2020-07-02 14:18:43 发布

zeqijiadelala

最新推荐文章于 2020-07-02 14:18:43 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/zeqijiadelala/article/details/51918967

版权

HTML代码：

<td class="center relative-position">
    <a class="btn btn-switch" href="#">
        <i class="icon-reorder"></i>
    </a>
    <div class="icon-list-container">
        <a class="btn btn-info" href="Management-editor.html">
            <i class="icon-edit "></i>
        </a>
        <a class="btn btn-danger btn-setting" href="#">
            <i class="icon-trash "></i>
        </a>
    </div>
</td>

css代码：

.relative-position{
    position:relative;
}
.icon-list-container{
    display:block;
}
.btn-switch{
    display:none;
}
@media (max-width: 767px){
    .icon-list-container{
        display:none;
        width:50px;
        position: absolute;
        left:-50px;
        top:-50px;
        z-index:999;

    }
    .btn-switch{
        display: inline-block;
    }

}
js代码

$(document).ready(function(){
    $(".table-striped").on('click','.btn-switch',function(b){
        if($(this).hasClass('shown')){
            $(this).removeClass('shown').next().hide();
        }else{
            b.preventDefault();
            $('.btn-switch').removeClass('shown').next().hide();
            $(this).addClass('shown').next().show();
        }

    });
});