码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-09-09 18:06:47      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:logs   fun   调用   top   点击   code   button   ref   event   

这只是一个例子,先看看效果:

技术分享

 

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

 

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

标签:logs   fun   调用   top   点击   code   button   ref   event   

原文地址:http://www.cnblogs.com/LChenglong/p/7498797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!