解决bootstrap下拉菜单无法隐藏的问题
来源:互联网 发布:地图数据在线生成工具 编辑:程序博客网 时间:2024/06/08 16:35
下拉菜单的两种实现
想必大家都知道,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="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据挖掘</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">分离的链接</a> </li> </ul></div>
2.js调用dropdown(‘toggle’)方法
<div class="dropdown"> <a href="#" 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="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据挖掘</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据通信/网络</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="#" 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="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据挖掘</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">分离的链接</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 参数,否则不能设置该参数。
阅读全文
0 0
- 解决bootstrap下拉菜单无法隐藏的问题
- bootstrap的下拉菜单
- bootstrap的下拉菜单
- Bootstrap—解决下拉菜单不弹出问题
- 通用的下拉菜单__用DL/DD/DT解决无法遮住select的问题
- 用js解决下拉菜单的问题
- 解决 FusionCharts 遮住下拉菜单的问题
- bootstrap分割的按钮下拉菜单,按钮和下拉菜单不对齐问题
- Bootstrap 3的多级下拉菜单示例
- bootstrap下拉菜单无效的解决方法之一
- Bootstrap下拉菜单
- 【Bootstrap】下拉菜单Dropdown
- bootstrap 下拉菜单
- Bootstrap 按钮下拉菜单
- bootstrap入门【下拉菜单】
- Bootstrap下拉菜单
- bootstrap 下拉菜单
- Bootstrap学习--下拉菜单
- MVC Action 返回类型[转]
- iOS开发 Swift3新特性
- 导出导入xml的实现
- Eclipse Maven project 报错:An error occurred while filtering resources 解决方法
- 我们为什么优化网站要做SEO?
- 解决bootstrap下拉菜单无法隐藏的问题
- Linq Distinct()使用
- CSS选择器和jQuery选择器的区别与联系
- window下C++的函数签名
- 概率机器人——第二章 递推状态估计
- Android下webview加载网页失败后显示一张平铺图片
- ubuntu修改hostname
- IBM watson API解析2-Document Conversion(文本转换)
- Linux 链接命令