tab切换并且点击页面其他部分时隐藏下拉菜单

最新推荐文章于 2022-08-24 10:18:11 发布

西瓜最中间

最新推荐文章于 2022-08-24 10:18:11 发布

阅读量547

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45379942/article/details/104146013

版权

CSS代码

 <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li {
            list-style-type: none;
        }
        #list {
            margin: 0 auto;
            margin-top: 50px;
            display: flex;
            width: 200px;
            height: 20px;
        }
        li {
            position: relative;
            width: 50px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border: 1px solid #8D8D8D;
        }
        li div:last-child {
            position: absolute;
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            top: 55px;
            left: 0;
            background-color: #C2BE9E;
            display: none;
        }
    </style>

HTML代码

<body>
    <ul id="list">
        <li class="a">
            <span class="title">a</span>
            <div class="a_absolute">aaaaaaaaaaa</div>
        </li>
        <li class="b">
            <span class="title">b</span>
            <div class="b_absolute">bbbbbbbbbbb</div>
        </li>
        <li class="c">
            <span class="title">c</span>
            <div class="c_absolute">ccccccccccc</div>
        </li>
        <li class="d">
            <span class="title">d</span>
            <div class="d_absolute">ddddddddddd</div>
        </li>
    </ul>
</body>

JS代码

<script>
    $("li").click(function () {
        $(this).children("span").css("color","#159CFF");
        $(this).siblings().children("span").css("color","#252626");
        $(this).children("div").css("display","block");
        $(this).siblings().children("div").css("display","none");
    })
    $(document).bind("click",function(e){
        var e = e || window.event;    //事件对象，兼容IE
        var target = e.target || e.srcElement;  //源对象，兼容火狐和IE
        while(target){
            if (target.id && target.id == "list"){    //循环判断至根节点，防止点击的是#list和它的子元素
                return;
            }
            target = target.parentNode;
        }
        $("#list li").children("button").children("span").css("color","#252626");
        //点击的不是#list和它的子元素，字体颜色恢复
        $("#list li").children("div").css("display","none");
        //点击的不是#list和它的子元素，隐藏下拉菜单
    })
</script>

效果
在这里插入图片描述

西瓜最中间

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
tab切换并且点击页面其他部分时隐藏下拉菜单

CSS代码 <style> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style-type: none; } #list {...
复制链接

扫一扫

tab切换 并且点击页面其他部分时 隐藏下拉菜单

tab切换并且点击页面其他部分时隐藏下拉菜单