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 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
如何提高数据访问速度
Dec 26 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
JS轮播图的实现方法
Aug 24 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php实现文件下载(支持中文文名)
2013/12/04 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
开始着手第一个Django项目
2015/07/15 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
python绘制多个曲线的折线图
2020/03/23 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
python如何判断IP地址合法性
2020/04/05 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
机电专业个人求职信范文
2013/12/30 职场文书
继电保护工岗位职责
2014/01/05 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
中学生英语演讲稿
2014/04/26 职场文书
2015年国庆节标语大全
2015/07/30 职场文书