首页 > 代码库 > jQuery 点击任意处隐藏，除某个元素外

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

2024-10-05 07:07:39   214人阅读

<!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 点击任意处隐藏，除某个元素外


联系
我们