本文实例讲述了JS模拟bootstrap下拉菜单效果。分享给大家供大家参考，具体如下：

模拟bootstrap下拉菜单

在工作中要切一个效果：点击导航栏，则出现下列菜单，但是当点击其他地方的时候，就隐藏子菜单，效果有点类似于bootstrap 的“下拉菜单”

由于bootstrap的子菜单的样式与设计不同，因此需要自己写一个类似的效果

当点击某个控件的时候，则显示出下拉菜单，但是，当点击空白的地方的时候怎么让其自动隐藏呢？

起初的想法，给body绑定一个onclick事件，当点击空白的地方由于事件冒泡，触发click body的事件，但是问题来了，点击控件的时候，同样会触发body的click事件，导致下拉菜单显示出来之后，有被收缩回去了，因此这个思路不正确

由于bootstrap已经实现了这个功能，查看其源代码，找到了解决思路：

给document绑定事件（隐藏其子菜单），当触发控件的方法时则阻止其冒泡，不让其触发绑定

<> <div> <div> <span> 分类 <span></span> </span> <ul data-show="hide"> <li target="https://www.baidu.com"> <span>家政</span> <span></span> <span></span> </li> <li target="https://www.baidu.com"> <span>蔬菜</span> <span></span> <span></span> </li> <li target="https://www.baidu.com"> <span>零食</span> <span></span> <span></span> </li> </ul> </div> </div> <div> <div> <span> 分类 <span></span> </span> <ul data-show="hide"> <li target="https://www.baidu.com"> <span>家政1</span> <span></span> <span></span> </li> <li target="https://www.baidu.com"> <span>蔬菜1</span> <span></span> <span></span> </li> <li target="https://www.baidu.com"> <span>零食1</span> <span></span> <span></span> </li> </ul> </div> </div> <div> <div> <span></span> </div> <> <div> <div data-search="hide"> <div> <div> <span></span> <input placeholder="搜索" type="text" value=""> </div> <div> <button type="button">搜索</button> </div> </div> </div> </div> </div> <script> $(function(){ //给document绑定事件 $(document).on("click",function(){ //找到控件是ul并且包含属性data-show="show"的控件，如果有，则让其隐藏起来 $("ul[data-show='show']").slideUp("slow"); }); $(document).on("click",function(){ //找到控件是div并且包含属性data-show="show"的控件，如果有，则修改其css属性。 $("div[data-search='show']").css("display","none").css("width","32%"); }); }); //显示或关闭筛选条件 function showOrHideItem(obj,event){ // alert(arguments.callee); // alert(showOrHideItem.caller); var $currentObj = $(obj); //隐藏所有的下拉列表 $("ul[data-show='show']").hide(); //清除所有active类 $currentObj.closest(".row").find("div.active").removeClass("active"); //给当前div添加选中样式 $currentObj.closest(".float_left").addClass("active") var $ul = $currentObj.closest("div").find("ul"); //ul是展开状态 if($ul.data("show") == "show"){ $ul.slideUp("slow"); $ul.attr("data-show","hide"); }else{ //ul是展开状态 $ul.slideDown("slow"); $ul.attr("data-show","show"); //阻止事件冒泡 event.stopPropagation(); } } //展示搜索框 function showSearch(obj,event){ var $currentObj = $(obj).closest(".float_left").find(".search_cont").css("display","block"); $currentObj.animate({ width: "100%" }, 1000 ); $currentObj.attr("data-search","show"); //阻止事件冒泡 event.stopPropagation(); } function stopEvent(obj,event){ //阻止事件冒泡 event.stopPropagation(); } </script>

希望本文所述对大家JavaScript程序设计有所帮助。