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

 更新时间:2018年08月10日 10:26:11   作者:CalicoBox   我要评论

今天小编就为大家分享一篇快速解决bootstrap下拉菜单无法隐藏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

下拉菜单的两种实现

想必大家都知道,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下拉菜单无法隐藏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Bootstrap 3.x打印预览背景色与文字显示异常的解决

    Bootstrap 3.x打印预览背景色与文字显示异常的解决

    前几天同事有个问题咨询我,他在调用print()来打印页面,发现打印预览页面上的背景色无法显示以及文字总是显示为黑色,感觉非常奇怪,我通过测试发现是Bootstrap的问题,现在将解决的方法分享给大家,希望可以帮助到同样遇到这个问题的朋友们,下面来一起看看。
    2016-11-11
  • IE6不能修改NAME问题的解决方法

    IE6不能修改NAME问题的解决方法

    昨天在项目中发现IE6动态生成的INPUT是不能改NAME的,微软关于这个问题有这么个说法
    2010-09-09
  • JS实现中文汉字按拼音排序的方法

    JS实现中文汉字按拼音排序的方法

    这篇文章主要介绍了JS实现中文汉字按拼音排序的方法,涉及javascript针对中文字符串的转换、遍历、排序等相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • js中的eventType事件及其浏览器支持性介绍

    js中的eventType事件及其浏览器支持性介绍

    js中的eventType事件想必大家都不陌生吧,下面为大家详细介绍下一般的事情及浏览器支持性,感兴趣的朋友可以参考下
    2013-11-11
  • 深入理解JavaScript系列(29):设计模式之装饰者模式详解

    深入理解JavaScript系列(29):设计模式之装饰者模式详解

    这篇文章主要介绍了深入理解JavaScript系列(29):设计模式之装饰者模式详解,装饰者用用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用(例如装饰者的构造函数),需要的朋友可以参考下
    2015-03-03
  • JavaScript制作简单分页插件

    JavaScript制作简单分页插件

    本文给大家分享的是JavaScript制作的一个兼容IE6+以及主流浏览器的分页插件,非常的不错,有需要的小伙伴可以参考下
    2016-09-09
  • 修改ligerui 默认确认按钮的方法

    修改ligerui 默认确认按钮的方法

    下面小编就为大家带来一篇修改ligerui 默认确认按钮的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • 莱鸟介绍javascript onclick事件

    莱鸟介绍javascript onclick事件

    这篇文章主要介绍了莱鸟介绍javascript onclick事件的相关资料,需要的朋友可以参考下
    2016-01-01
  • JavaScript累加、迭代、穷举、递归等常用算法实例小结

    JavaScript累加、迭代、穷举、递归等常用算法实例小结

    这篇文章主要介绍了JavaScript累加、迭代、穷举、递归等常用算法,结合实例形式分析了javascript累加、迭代、递推、穷举等算法的相关实现技巧与注意事项,需要的朋友可以参考下
    2018-05-05
  • Bootstrap列表组学习使用

    Bootstrap列表组学习使用

    这篇文章主要为大家详细介绍了Bootstrap列表组的学习使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论