经典的菜单显示隐藏代码


1.按钮上的click事件 ： 控制菜单的显示隐藏,同时需要阻止事件冒泡到document；

2.document的click事件： 让menu隐藏,这个功能是点击document任意一处,将菜单隐藏；

3.菜单的click事件：菜单本身并没有，是菜单内部的元素的click事件，需要阻止内部元素的click事件冒泡到document；

4.菜单内部list元素的click事件：menu不能隐藏。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单隐藏显示</title>
    <style>
        .showBtn{
            cursor: pointer;
        }
        .menu {
            display: none;
            background-color: #fff;
            width: 100px;
        }
        .menu ul{
            list-style: none;
        }
        .menu a{
            display:block;
            text-decoration: none;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<input type="button" class="showBtn" value="显示菜单">
<!-- 菜单默认不显示 -->
<div class="menu">
    <ul>
        <li><a href="">菜单一</a></li>
        <li><a href="">菜单二</a></li>
        <li><a href="">菜单三</a></li>
    </ul>
</div>
<script src="./jquery-1.11.3.min.js"></script>
<script>

    //点击“显示菜单”按钮时，显示菜单，并阻止事件冒泡
    $(".showBtn").click(function(e){
        if($(".showBtn").val()=='隐藏菜单'){
            $(".menu").hide();
            $(this).val('显示菜单');
        }else{
            $(".menu").show();
            $(this).val('隐藏菜单');
        }
        e.stopPropagation();//阻止按钮点击事件冒泡到document
    });

    //点击“菜单”内部时，阻止事件冒泡。(这样点击内部时，菜单不会关闭)
    $(".menu").click(function(e){
        e.stopPropagation();//阻止菜单内部点击事件冒泡到document
    });

    //监听整个document的点击事件，如果能收到事件(说明点击源既不是“显示菜单”按钮，也不来自菜单内部)，就可以放心关闭菜单了
    $(document).click(function(){
        $(".menu").hide();
        $(".showBtn").val('显示菜单');
    });

</script>
</body>
</html>

 

posted @ 2016-06-13 10:31  木西梧  阅读(2019)  评论(0)  编辑  收藏  举报