JS模拟bootstrap下拉菜单效果实例

前端技术 2023/09/06 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/16535

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案