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

来源：互联网发布：北京网络职业学院地图编辑：程序博客网时间：2024/04/29 08:40

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();        }    });});

0 0