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

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

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});