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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
Vue函数式组件-你值得拥有
May 09 Javascript
vant时间控件使用方法详解
Dec 24 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
js实现聊天对话框
2020/02/08 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
python实现文字版扫雷
2020/04/24 Python
python else语句在循环中的运用详解
2020/07/06 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
投资合作协议书
2014/04/17 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
欢迎新生标语2015
2015/07/16 职场文书
教师节主题班会教案
2015/08/17 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js