JS類比bootstrap下拉式功能表效果執行個體_javascript技巧

本文執行個體講述了JS類比bootstrap下拉式功能表效果。分享給大家供大家參考，具體如下：

類比bootstrap下拉式功能表

在工作中要切一個效果：點擊導覽列，則出現下列菜單，但是當點擊其他地方的時候，就隱藏子功能表，效果有點類似於bootstrap 的“下拉式功能表”

由於bootstrap的子功能表的樣式與設計不同，因此需要自己寫一個類似的效果

當點擊某個控制項的時候，則顯示出下拉式功能表，但是，當點擊空白的地方的時候怎麼讓其自動隱藏呢？

起初的想法，給body綁定一個onclick事件，當點擊空白的地方由於事件冒泡，觸發click body的事件，但是問題來了，點擊控制項的時候，同樣會觸發body的click事件，導致下拉式功能表顯示出來之後，有被收縮回去了，因此這個思路不正確

由於bootstrap已經實現了這個功能，查看其原始碼，找到瞭解決思路：
給document綁定事件（隱藏其子功能表），當觸發控制項的方法時則阻止其冒泡，不讓其觸發綁定

<!-- 篩選導覽列 --><div class="border_b_bottom_3eee text-center width_40 float_left active" style="z-index: 999">  <div class="margin_bottom_10 margin_top_10 ">    <span onclick="showOrHideItem(this,event)" class="title">      分類      <span class="caret"></span>    </span>    <ul class="list-unstyled all_width sqh_absolute sqh_line_height_25 sqh_tmp_bj_ff border_b_bottom_eee sqh_position_top_100 sqh_position_left_0 display_none" data-show="hide" style="z-index: 999;">      <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com">        <span class="float_left">家政</span>        <span class="float_right icon iconfont sqh_line_height_15"></span>        <span class="clearfix"></span>      </li>      <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com">        <span class="float_left">蔬菜</span>        <span class="float_right icon iconfont sqh_line_height_15"></span>        <span class="clearfix"></span>      </li>      <li class=" margin_left_10 margin_right_10 sqh_pointer sqh_font_color_red" onclick="jumpTo(this)" target="https://www.baidu.com">        <span class="float_left">零食</span>        <span class="float_right icon iconfont sqh_line_height_15"></span>        <span class="clearfix"></span>      </li>    </ul>  </div></div><div class="text-center border_b_bottom_3eee width_40 float_left">  <div class="margin_bottom_10 margin_top_10 border_b_right_eee">    <span onclick="showOrHideItem(this,event)" class="title">      分類      <span class="caret"></span>    </span>    <ul class="list-unstyled all_width sqh_absolute sqh_line_height_25 sqh_tmp_bj_ff border_b_bottom_eee" data-show="hide" style="top:100%;left: 0px;z-index: 999;display: none">      <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee" onclick="jumpTo(this)" target="https://www.baidu.com">        <span class="float_left">家政1</span>        <span class="float_right icon iconfont sqh_line_height_15"></span>        <span class="clearfix"></span>      </li>      <li class=" margin_left_10 margin_right_10 sqh_pointer border_b_bottom_eee sqh_font_color_red" onclick="jumpTo(this)" target="https://www.baidu.com">        <span class="float_left">蔬菜1</span>        <span class="float_right icon iconfont sqh_line_height_15"></span>        <span class="clearfix"></span>      </li>      <li class=" margin_left_10 margin_right_10 sqh_pointer" onclick="jumpTo(this)" target="https://www.baidu.com">        <span class="float_left">零食1</span>        <span class="float_right icon iconfont sqh_line_height_15"></span>        <span class="clearfix"></span>      </li>    </ul>  </div></div><div class="text-right border_b_bottom_3eee text-center width_20 float_left">  <div class="margin_bottom_10 margin_top_10" onclick="showSearch(this,event)">    <span class="icon iconfont font_14 display_block padding_left_5"></span>  </div>  <!-- 顯示搜尋方塊 -->  <div class=" sqh_tmp_bj_ff">    <div class="sqh_absolute sqh_line_height_25 sqh_tmp_bj_ff search_cont" style="top:58%;right: 0px;z-index: 999;display: none;" data-search="hide">      <div class="margin_left_15 ">        <div class="sqh_relative" style="margin-right: 80px;">          <span class="icon iconfont font_14 sqh_absolute padding_left_5" style="left: 0px;top:0px;"></span>          <input class="in_search all_width padding_left_30 sqh_tmp_bj_f3 sqh_border_radius_20" placeholder="搜尋" onclick="stopEvent(this,event)" type="text" value="">        </div>        <div class="float_right" style="width: 80px;">          <button type="button" class="btn btn-e4005a" 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程式設計有所協助。