实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法
来源:互联网 发布:北理工网络教育 编辑:程序博客网 时间:2024/05/20 11:26
问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input>,如果不加处理的话,那么在点击需要操作的元素的时候,由于事件传播的原因将会出现下拉菜单也隐藏掉的情况。
解决方法
1
$('.dropdown-menu a.removefromcart').click(function(e) {
e.stopPropagation();
});
指定要操作的元素的click事件停止传播2
$(function() {
$("ul.dropdown-menu").on("click", "[data-stopPropagation]", function(e) {
e.stopPropagation();
});
});
定义属性值data-stopPropagation的元素点击时停止传播事件
<ul class="dropdown-menu">
<li>
<-- Do not close when clicking this link -->
<a href="#" data-stopPropagation="true">
...
</a>
</li>
<li>
<-- Do not close when clicking this checkbox -->
<input type="checkbox" data-stopPropagation="true" ... >
</li><-- Do not close when clicking anything in this LI -->
<li data-stopPropagation="true">
...
</li>
</ul>
之后需要时加上该属性即可。
- 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法
- 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法
- 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法
- bootstrap中下拉菜单点击后不关闭的方法
- 取消Bootstrap的dropdown-menu点击默认关闭事件
- 【Bootstrap】下拉菜单Dropdown
- bootstrap之dropdown下拉菜单
- TableView的点击出现和关闭下拉菜单的实现
- Bootstrap使用Tab和dropdown实现导航下拉菜单效果
- flex Menu(下拉菜单)的实现
- BootStrap--CSS组件--下拉菜单(dropdown)
- 下拉列表dropdown取消默认点击隐藏及修复需要二次点击的方法
- bootstrap的下拉菜单
- bootstrap的下拉菜单
- 关于UGUI的DropDown点击区域外不关闭的问题
- bootstrap下拉菜单点击时间的变成hover只需三步
- 【解决方法】点击bootstrap上的下拉菜单无反应
- 菜单弹出后点击其他区域则关闭菜单的方法
- IE,谷歌浏览器的兼容性问题总结
- JavaScript前端常见算法面试题总结
- MySQL学习笔记-约束以及修改数据表
- CentOS下RPM方式安装MySQL5.6
- python魔法方法——(__new__)
- 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法
- nyoj-91-阶乘之和
- 网站SEO优化为什么要设置面包屑导航
- * response * request * 编码 * 路径等小结
- EventBus的简单使用,消息传递
- ArrayList源码阅读c.toArray might (incorrectly) not return Object[] (see 6260652)
- solr源码导入eclipse进行编译之出现的问题
- 网络图片浏览
- uva 147 拆钱(完全背包)