jq菜单筛选功能 点击选择再次点击取消(每组可多选)

效果图


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style: none;
        }
        ul{
            height:100px;
        }
        li{
            margin-left:100px;
            float: left;
        }
        a{
            color: #000;
        }
        li.active a{
            color:cornflowerblue;
        }
    </style>
</head>
<body>
<div class="col-md-12">
    <dl class="clearfix">
        <dt>国籍:</dt>
        <dd>
            <ul class="clearfix">
                <li class="active" data-index="1"><a href="javascript:;">大陆</a></li>
                <li data-index="32"><a href="javascript:;">韩国</a></li>
                <li data-index="33"><a href="javascript:;">台湾</a></li>
                <li data-index="34"><a href="javascript:;">日本</a></li>
                <li data-index="5"><a href="javascript:;">澳门</a></li>
                <li data-index="6"><a href="javascript:;">香港</a></li>
                <li data-index="7"><a href="javascript:;">泰国</a></li>
            </ul>
        </dd>
    </dl>
</div>
<div class="col-md-12">
    <dl class="clearfix">
        <dt>从医时间:</dt>
        <dd>
            <ul class="clearfix">
                <li data-index="8"><a href="javascript:;">1-3年</a></li>
                <li data-index="39"><a href="javascript:;">3-5年</a></li>
                <li data-index="310"><a href="javascript:;">5-10年</a></li>
                <li data-index="11"><a href="javascript:;">10年以上</a></li>
            </ul>
        </dd>
    </dl>
</div>
<div class="col-md-12">
    <dl class="clearfix">
        <dt>职级:</dt>
        <dd>
            <ul class="clearfix">
                <li data-index="12"><a href="javascript:;">主任医师</a></li>
                <li data-index="143"><a href="javascript:;">副主任医师</a></li>
                <li data-index="154"><a href="javascript:;">副教授</a></li>
                <li data-index="15"><a href="javascript:;">主治医师</a></li>
                <li data-index="166"><a href="javascript:;">住院医师</a></li>
                <li data-index="17"><a href="javascript:;">其他</a></li>
            </ul>
        </dd>
    </dl>
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $(function(){
        var Arr = [];
        $("body").on("click","li",function(e){
            e.stopPropagation();
            var val = $(this).attr("data-index");

            var index = Arr.indexOf(val)
            if(index>-1){
                $(this).removeClass("active");
                Arr.splice(index,1)
            }else{
                $(this).addClass("active");
                Arr.push(val)
            }
        })
    })
</script>

另:附动态赋值li的data-index方法

//筛选之前为每一个li赋值data-index
$("li").each(function (i) {
     console.log(i)
     $("li").eq(i).attr("data-index",i);
 })

猜你喜欢

转载自blog.csdn.net/yangbingx/article/details/80538488
今日推荐