jQuery 点击任意处隐藏,除某个元素外

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 点击任意处隐藏,除某个元素外相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .menu_level1{
            width:500px;
            height:auto;
            margin:50px auto;
        }
        .menu_level1>li{
            position: relative;
            float: left;
            list-style-type: none;
            height:30px;
        }
        .menu_level1>li>a{
            padding:10px 15px;
            font-size:16px;
        }
        .menu_level2{
            position:absolute;
            top:30px;
            left:0;
            padding:20px;
            height:100px;
            background-color:#fff;
            border:1px solid #ccc;
            border-radius:5px;
            box-shadow: 2px 2px 2px #eee;
            display: none;
        }
        .menu_level1>li:hover{
            background-color:pink;
        }
    </style>
</head>
<body>
    <ul class="menu_level1">
        <li><a>哈哈</a></li>
        <li><a>嘿嘿</a></li>
        <li><a>呼呼</a></li>
        <li><a>点我</a>
          <div class="menu_level2">哈罗,我是一块板砖,哪里需要哪里搬。。。。。</div>
        </li>
    </ul>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $(".menu_level1 li").click(function(){
        $(".menu_level2").show();
    });

    $(document).click(function(e){
        var target = $(e.target);
        if(target.closest(".menu_level1").length != 0) return;
        $(".menu_level2").hide();

    });
</script>
</html>

以上代码是用jQuery实现的,用angular的方法还没实现

以上是关于jQuery 点击任意处隐藏,除某个元素外的主要内容,如果未能解决你的问题,请参考以下文章

点击除元素以外的任意地方隐藏元素js

jquery 点击增加样式,点击移除样式

jQuery 点击元素以外任意地方隐藏该元素

点击div和某些控件之外的地方隐藏div,点击div不隐藏。对象 click和document click冲突有关问题

jquery怎样点击某个元素后获得另一个元素里的链接并跳转

用jq添加或移除div