zoukankan      html  css  js  c++  java
  • 经典的菜单显示隐藏代码


    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>
  • 相关阅读:
    ASP.NET中在一般处理程序中使用session的简单介绍
    oracle 11gR2安装图文教程
    ORACEL 创建表空间
    Echarts使用心得总结(二)
    SqlServer 2008无法远程连接到服务器
    浅谈HTTP中Get与Post的区别
    java设计模式-观察者模式学习
    读牛人博客有感
    mysql的with rollup
    java中的枚举enum
  • 原文地址:https://www.cnblogs.com/sapho/p/5579754.html
Copyright © 2011-2022 走看看