js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

Posted 2020-10-06 AiTing on the way

这只是一个例子，先看看效果：

 

html代码：

<nav>
            <span class="nav_logo"></span>
            <h1>云蚂客首页</h1>
            <button class="nav_btn"></button>
            <ul class="menu">
                <li><a href="#">首页</a></li>
              <li><a href="#">联系客服</a></li>
              <li><a href="#">联系客服</a></li>
              <li><a href="#">联系客服</a></li>
            </ul>
        </nav>

 

js函数代码及调用：

//构建函数：菜单显示隐藏js方法
                var btnAndMenu=function(options) {
                        /*
                            btnObj:菜单按钮的ID
                            menuId：菜单的ID
                            type：是否组织默认事件冒泡（1：点击外部菜单会隐藏；0：点击外部菜单不会隐藏，只有点击按钮才行）。
                        */
                        var objSetting={btnObj:\'#menu_btn1\',menuObj:\'#menu1\',type:1};
                        if (options){$.extend(objSetting,options)};
                        
                        var btnObj = $(objSetting.btnObj);
                        var menuObj = $(objSetting.menuObj);
                        var type = objSetting.type;
                        btnObj.click(function(event){
                                if(menuObj.is(\':hidden\')){
                                    menuObj.show();
                                }else{
                                    menuObj.hide();
                                }
                                event.stopPropagation();//阻止事件向上冒泡
                        });
                        
                        if(type=1){
                                $(document).on("click", function () {//对document绑定一个影藏Div方法
                                        menuObj.hide();
                                });
                                menuObj.on(\'click\',function(event){
                                        event.stopPropagation();//阻止事件向上冒泡
                                });
                        }
                };

//菜单显示隐藏控制
                        btnAndMenu({btnObj:\'.nav_btn\',menuObj:\'.menu\',type:1});