html点击下拉菜单后不刷新,解决bootstrap中下拉菜单点击后不关闭的问题

"本文介绍了如何在Bootstrap中实现下拉菜单点击后保持开启状态,特别是对于需要用户进行操作如筛选查询的场景。通过阻止事件传播,可以使得点击下拉菜单内的特定元素时不关闭下拉框。只需在相关元素上添加"data-stopPropagation='true'"属性,并通过jQuery监听该事件来阻止其关闭。"
摘要由CSDN通过智能技术生成

bootstrap中常用到的下拉菜单dropdown-menu默认是当点击下拉菜单的任一位置就会关闭下拉菜单框了,这显然达不到很多用户需求,如何实现当点击需要点击的地方后才关闭下拉框呢,下面来简单介绍下方法,比如要做一个下拉框筛选查询,下拉菜单展示图如下:

a295e105745ebff53f85cadad1f1112e.png

解决方法:

指定要操作的元素的click事件停止传播—定义属性值data-stopPropagation的元素点击时停止传播事件

//下拉框查询组件点击查询栏时不关闭下拉框

$("body").on('click','[data-stopPropagation]',function (e) {

e.stopPropagation();

});

之后在你需要点击不关闭的标签下加上该属性data-stopPropagation=”true”即可。

以上这篇解决bootstrap中下拉菜单点击后不关闭的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值