这只是一个例子，先看看效果：
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
原文地址：http://www.cnblogs.com/LChenglong/p/7498797.html