快速解决bootstrap下拉菜单无法隐藏的问题


Posted in Javascript onAugust 10, 2018

下拉菜单的两种实现

想必大家都知道,bootstrap为我们提供了一个下拉菜单的组件,官方也为我们提供两种使用方法

1.标签指定data-toggle

<div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Java</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据挖掘</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据通信/网络</a>
    </li>
    <li role="presentation" class="divider"></li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >分离的链接</a>
    </li>
  </ul>
</div>

2.js调用dropdown(‘toggle')方法

<div class="dropdown">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" id="dropdownMenu1" >
    主题
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Java</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据挖掘</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据通信/网络</a>
    </li>
  </ul>
<button id="test">test</button>
</div>
</body>

<script>
  $(function() {
    $("#test").click(function() {
      $(".dropdown-toggle").dropdown('toggle');
    })
  })
</script>

第二种方法有个很严重的问题

就是,下拉菜单开启后,官方并没有提供将它隐藏的方法,网上的方法死活说再次调用dropdown(‘toggle')。。。反正我不行。

那么我想用点击之外来开启下拉菜单呢?(必须得使用JS来控制)

我想到一个方法,使用jQuery提供的一个效果slideUp(),slideDown()

<body>
<div class="dropdown">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" id="dropdownMenu1" >
    主题
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Java</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据挖掘</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >数据通信/网络</a>
    </li>
    <li role="presentation" class="divider"></li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >分离的链接</a>
    </li>
  </ul>
<button id="test">test</button>
<button id="test1">test1</button>
</div>
</body>
<script>
  $(function() {
    $("#test").click(function() {
      $(".dropdown-menu").slideUp();
    })
    $("#test1").click(function() {
      $(".dropdown-menu").slideDown();
    })
  })
</script>

好了现在能实现开和关了,但是速度有点慢?没事slide可以通过参数调节速度甚至还有回调函数来替代$(selector).on("hidden.bs.dropdown', function () {})(对下拉菜单收回时间的监听),满分!

$(selector).slideUp(speed,callback)

speed 可选。规定元素从可见到隐藏的速度(或者相反)。默认为 “normal”。 可能的值:

毫秒 (比如 1500)

“slow”
“normal”
“fast”

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度(这样会创造滑动效果)。

callback

可选。slideUp 函数执行完之后,要执行的函数。 除非设置了 speed 参数,否则不能设置该参数。

以上这篇快速解决bootstrap下拉菜单无法隐藏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 #Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 #Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 #Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 #Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 #Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 #Javascript
bootstrap下拉框动态赋值方法
Aug 10 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
php UTF8 文件的签名问题
2009/10/30 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
python3使用GUI统计代码量
2019/09/18 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
社区巾帼文明岗事迹材料
2014/06/03 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
2015年教师节活动总结
2015/03/20 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android