快速解决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 相关文章推荐
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
详解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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
js实现一个简易计算器
2020/03/30 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
Python群发邮件实例代码
2014/01/03 Python
python sort、sorted高级排序技巧
2014/11/21 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
破解安装Pycharm的方法
2018/10/19 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
JNI的定义
2012/11/25 面试题
正规的求职信范文分享
2013/12/11 职场文书
股票投资建议书
2014/05/19 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
元宵节寄语大全
2015/02/27 职场文书
技术入股合作协议书
2016/03/21 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers