jquery 点击页面其他地方隐藏菜单

知兮丶青
阅读(1151) 2018-03-03
jquery 点击页面其他地方隐藏菜单
jquery 点击页面其他地方隐藏菜单

jquery实现点击某按钮显示div自定义菜单或导航,当点击其他地方或空白处时隐藏菜单。

下面是实现该功能的四步曲。


1、定义html

首先引入jquery.js,我们简单定义html。

<button id="btn">显示div</button>
<div id="menu" class="box">
    父DIV
    <div class="box-child">
        子DIV
    </div>
</div>

button:为点击显示菜单div的按钮

.box:为菜单div

.box-child:为菜单里面的子div(测试用)



2、击事件 click

你需要设置菜单默认为display:none;不显示的,当点击按钮时显示菜单。

$("#btn").click(function(event){
    //console.log("点击了btn");
    $("#menu").show();
});

如何捕获点击其他地方呢?显然需要使用到document了

$(document).click(function(event){
    //console.log("点击了其他地方");
    $("#menu").hide();
});

这个时候你发现菜单没显示,其实是显示了又马上隐藏了。点击btn后也触发了document的click事件。你会发现事件冒泡了。



3、事件冒泡处理

你可以使用return false;或者event.preventDefault();event.stopPropagation();来阻止事件冒泡。

return false; 表示阻止了默认的事件行为并停止了事件通过dom向上冒泡,该操作其实也做了以下那2种操作等。

event.preventDefault(); 表示阻止事件的默认行为

event.stopPropagation(); 表示阻止该dom节点往上冒泡

$("#btn").click(function(event){
    //console.log("点击了btn");
    $("#menu").show();
    return false;
    //event.preventDefault();
    //event.stopPropagation();
});

这时已经实现了一大半,还有个问题就是:除了按钮外,无论你点哪里都隐藏了,包括点菜单自身及点菜单内的子div等元素都触发了隐藏。



4、条件定界

在document的点击事件中(即点击其他地方),需要实现仅 点击的是菜单 或 点击的是菜单的子元素 不需要隐藏。

$(document).click(function(event){
    //console.log("点击了其他地方");
    var menu = $("#menu");

    //点击的不是菜单 且 点击的不是菜单的子元素
    if(!menu.is(event.target) && menu.has(event.target).length === 0){
        console.log("点击了其他地方");
    }else{
        console.log("点击了菜单");
    }
});

这时或基本实现了我们需要的功能,再加入menu.is(":visible"),判断如果菜单是显示的话才去隐藏。

$(document).click(function(event){
    //console.log("点击了其他地方");
    var menu = $("#menu");

    //菜单是已显示的 且 点击的不是菜单 且 点击的不是菜单的子元素
    if(menu.is(":visible") && (!menu.is(event.target) && menu.has(event.target).length === 0)){
        //console.log("点击了其他地方");
        menu.hide();
    }
});

好了已实现了,下面给出完整例子。



完整示例

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>test</title>
        <script type="text/Javascript" src="jquery.min.js"></script>
        <style type="text/css">
            .box{border:1px solid #666;background:#ccc;width:150px;height:150px;display:none;}
            .box-child{background:blue;width:100px;height:100px;color:#ccc;margin:0 auto;}
        </style>
        <script type="text/Javascript">
            $(function(){
                $("#btn").click(function(event){
                    $("#menu").show();
                    return false;
                });
                $(document).click(function(event){
                    var menu = $("#menu");
                    if(menu.is(":visible") && (!menu.is(event.target) && menu.has(event.target).length === 0)){
                        menu.hide();
                    }
                });
            });
        </script>
    </head>
    <body>
        <button id="btn">显示div</button>
        <div id="menu" class="box">
            父DIV
            <div class="box-child">
                子DIV
            </div>
        </div>
    </body>
</html>

点击其他地方隐藏div.png



原创文章,转载请注明出处:https://www.weizhixi.com/article/78.html