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


Posted in Javascript onJune 17, 2016

本文实例讲述了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截取字符串的2个函数介绍
Aug 27 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 #Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 #Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 #Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 #Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 #Javascript
Bootstrap前端开发案例二
Jun 17 #Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 #Javascript
You might like
用PHP读取RSS feed的代码
2008/08/01 PHP
php array_intersect()函数使用代码
2009/01/14 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
php实现复制移动文件的方法
2015/07/29 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
关于react-router的几种配置方式详解
2017/07/24 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
省优秀教师事迹材料
2014/01/30 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
学校食品安全责任书
2015/01/29 职场文书
退货证明模板
2015/06/23 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书