欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS模擬bootstrap下拉菜單效果實(shí)例

 更新時(shí)間：2016年06月17日 16:31:23   作者：hbiao68  
這篇文章主要介紹了JS模擬bootstrap下拉菜單效果,結(jié)合完整實(shí)例形式分析了javascript動(dòng)態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS模擬bootstrap下拉菜單效果。分享給大家供大家參考，具體如下：

模擬bootstrap下拉菜單

在工作中要切一個(gè)效果：點(diǎn)擊導(dǎo)航欄，則出現(xiàn)下列菜單，但是當(dāng)點(diǎn)擊其他地方的時(shí)候，就隱藏子菜單，效果有點(diǎn)類似于bootstrap 的“下拉菜單”

由于bootstrap的子菜單的樣式與設(shè)計(jì)不同，因此需要自己寫一個(gè)類似的效果

當(dāng)點(diǎn)擊某個(gè)控件的時(shí)候，則顯示出下拉菜單，但是，當(dāng)點(diǎn)擊空白的地方的時(shí)候怎么讓其自動(dòng)隱藏呢？

起初的想法，給body綁定一個(gè)onclick事件，當(dāng)點(diǎn)擊空白的地方由于事件冒泡，觸發(fā)click body的事件，但是問題來了，點(diǎn)擊控件的時(shí)候，同樣會觸發(fā)body的click事件，導(dǎo)致下拉菜單顯示出來之后，有被收縮回去了，因此這個(gè)思路不正確

由于bootstrap已經(jīng)實(shí)現(xiàn)了這個(gè)功能，查看其源代碼，找到了解決思路：
給document綁定事件（隱藏其子菜單），當(dāng)觸發(fā)控件的方法時(shí)則阻止其冒泡，不讓其觸發(fā)綁定

<!-- 篩選導(dǎo)航欄 -->
<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">&#xe60e;</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">&#xe60e;</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">&#xe60e;</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">&#xe60e;</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">&#xe60e;</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">&#xe60e;</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">&#xe606;</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;">&#xe606;</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%");
  });
});
//顯示或關(guān)閉篩選條件
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");
  //給當(dāng)前div添加選中樣式
  $currentObj.closest(".float_left").addClass("active")
  var $ul = $currentObj.closest("div").find("ul");
  //ul是展開狀態(tài)
  if($ul.data("show") == "show"){
    $ul.slideUp("slow");
    $ul.attr("data-show","hide");
  }else{
    //ul是展開狀態(tài)
    $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>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論