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

更新时间：2016年06月17日 16:31:23 作者：hbiao68

这篇文章主要介绍了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">&#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%");
  });
});
//显示或关闭筛选条件
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程序设计有所帮助。

您可能感兴趣的文章:

JavaScript+Canvas创建一个独特的字符画生成器
这篇文章主要介绍了如何使用 Canvas 和 JavaScript 创建一个独特的字符画生成器,通过此生成器,我们可以将图片转换为由字符构成的作品,感兴趣的可以了解下
2024-01-01
JavaScript中绑定事件的三种方式及去除绑定
大家都知道要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。下面这篇文章给大家详细介绍了JavaScript中绑定事件的三种方式以及去除绑定的方法，有需要来一起看看吧。
2016-11-11
JS数组Object.keys()方法的使用示例
这篇文章主要介绍了JS数组Object.keys()方法的使用,结合实例形式分析了javascript使用Object.keys()方法进行数组遍历、读取相关操作技巧,需要的朋友可以参考下
2019-06-06
javascript表格随机排序代码
非常不错的思路，用js实现表格的随机排序，建议大家看代码，学习编程思路
2008-09-09
innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解
这篇文章主要介绍了javascript中的innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解，都是个人经验的总结，分享给大家，希望大家能够喜欢。
2015-03-03
js判断鼠标左、中、右键哪个被点击的方法
这篇文章主要介绍了js判断鼠标左、中、右键哪个被点击的方法,主要通过event.button事件来判断鼠标点击的类型,需要的朋友可以参考下
2015-01-01
js 走马灯简单实例
这篇文章主要介绍了js 走马灯简单实例，有需要的朋友可以参考一下
2013-11-11
JavaScript 使用Ckeditor+Ckfinder文件上传案例详解
这篇文章主要介绍了JavaScript 使用Ckeditor+Ckfinder文件上传案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-08-08
input 宽度自适应
感谢网友“liufabin”提出的关于不支持FF的问题，第一个在FF下经过测试时支持的，第二个中的高度自适应不支持，我在网上找了一个JQUERY的插件
2009-05-05
js实现的类似于asp数据字典的数据类型代码实例
这篇文章主要介绍了js实现的类似于asp数据字典的数据类型代码实例,即js实现的字典数据类型,需要的朋友可以参考下
2014-09-09