本文實例講述了JS模擬bootstrap下拉菜單效果。分享給大家供大家參考，具體如下：
模擬bootstrap下拉菜單
在工作中要切一個效果：點擊導航欄，則出現下列菜單，但是當點擊其他地方的時候，就隱藏子菜單，效果有點類似於bootstrap 的“下拉菜單”
由於bootstrap的子菜單的樣式與設計不同，因此需要自己寫一個類似的效果
當點擊某個控件的時候，則顯示出下拉菜單，但是，當點擊空白的地方的時候怎麼讓其自動隱藏呢？
起初的想法，給body綁定一個onclick事件，當點擊空白的地方由於事件冒泡，觸發click body的事件，但是問題來了，點擊控件的時候，同樣會觸發body的click事件，導致下拉菜單顯示出來之後，有被收縮回去了，因此這個思路不正確
由於bootstrap已經實現了這個功能，查看其源代碼，找到了解決思路：
給document綁定事件（隱藏其子菜單），當觸發控件的方法時則阻止其冒泡，不讓其觸發綁定
<!-- 篩選導航欄--><div style="z-index: 999"> <div> <span onclick="showOrHideItem(this,event)"> 分類<span></span> </span> <ul data-show="hide" style="z-index: 999;"> <li onclick="jumpTo(this)" target="https://www.baidu.com"> <span>家政</span> <span></span> <span></span> </li> <li onclick="jumpTo(this)" target="https://www.baidu.com"> <span>蔬菜</span> <span></span> <span></span> </li> <li onclick="jumpTo(this)" target="https://www.baidu.com"> <span>零食</span> <span></span> <span></span> </li> </ul> </div></div><div> <div> <span onclick="showOrHideItem(this,event)"> 分類<span></span> </span> <ul data-show="hide" style="top:100%;left: 0px;z-index: 999;display: none"> <li onclick="jumpTo(this)" target="https://www.baidu.com"> <span>家政1</span> <span></span> <span></span> </li> <li onclick="jumpTo(this)" target="https://www.baidu.com"> <span>蔬菜1</span> <span></span> <span></span> </li> <li onclick="jumpTo(this)" target="https://www.baidu.com"> <span>零食1</span> <span></span> <span></span> </li> </ul> </div></div><div> <div onclick="showSearch(this,event)"> <span></span> </div> <!-- 顯示搜索框--> <div> <div style="top:58%;right: 0px;z-index: 999;display: none;" data-search="hide"> <div> <div style="margin-right: 80px;"> <span style="left: 0px;top:0px;"></span> <input placeholder="搜索" onclick="stopEvent(this,event)" type="text" value=""> </div> <div> <button type="button" style="padding: 4px 12px;">搜索</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相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍曆算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。