单击特定列表项后,取消引导程序下拉菜单上的隐藏事件
Cancel hide event on bootstrap dropdown when a specific list item has been clicked
我有一个引导下拉菜单,具有以下HTML结构:
<div class="btn-group cart-item-qty-select open">
<button type="button" class="btn btn-default dropdown-toggle font-xsm cart-item-qty-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="cart-item-qty-btn-number">32</span>
<i class="fa fa-align-right font-xsm fa-caret-down"></i>
</button>
<ul class="dropdown-menu quantity-dropdown">
<li class="value" data-value="1">
<a href="javascript:void(null)">11</a>
</li>
<li class="value" data-value="2">
<a href="javascript:void(null)">12</a>
</li>
<li class="value" data-value="3">
<a href="javascript:void(null)">13</a>
</li>
<li class="value" data-value="4">
<a href="javascript:void(null)">14</a>
</li>
<li class="value" data-value="5">
<a href="javascript:void(null)">15</a>
</li>
<li class="value" data-value="6">
<a href="javascript:void(null)">16</a>
</li>
<li class="value" data-value="7">
<a href="javascript:void(null)">17</a>
</li>
<li class="value" data-value="8">
<a href="javascript:void(null)">18</a>
</li>
<li class="value" data-value="9">
<a href="javascript:void(null)">19</a>
</li>
<li role="separator" class="divider"></li>
<li class="quantity-increase-by-ten">
<a href="#">20+</a>
</li>
</ul>
</div>
我希望在单击li.quantity-increase-by-ten
时不要关闭下拉列表(隐藏.bs.dropdown事件已取消)。
不幸的是,下拉列表的事件对象没有提供任何关于单击了下拉列表中哪个项目的信息。
作为公认的答案,我还考虑了其他引导程序的替代方案,它们可以在风格上类似于下拉列表,但具有更多的事件对象灵活性。
$(function () {
$(".quantity-increase-by-ten").on("click", function (e) {
e.stopPropagation();
});
});
将停止向上调用,并阻止引导程序关闭下拉菜单。
<li>
的点击事件上的preventDefault()
会产生所需的效果吗?
$(".quantity-increase-by-ten").on("click", function(){
preventDefault();
//<li> click code here...
});
您只需要停止点击的传播:
$('.quantity-increase-by-ten').click(function(e) {
e.stopPropagation();
});
我希望这是你正在寻找的解决方案。
相关文章:
- 为什么引导程序下拉菜单只有在包含bootstrap-responsive.css时才起作用
- 单击图像后如何创建下拉菜单?[引导/角度]
- 为什么我的引导程序的下拉菜单不起作用
- 如何使用引导程序显示另一个导航栏而不是下拉菜单
- 引导程序3-下拉菜单项中的取消按钮
- 以引导程序为主题的下拉菜单失败
- 带有reactjs和引导程序的下拉菜单
- 如何根据标准显示下拉切换引导程序中的值
- 引导程序下拉菜单doen'不起作用
- 带有父按钮的自动下拉菜单,可将您带到引导程序中的另一个页面
- 下拉菜单引导 PHP
- 当我们在平板电脑上单击外部时,如何关闭引导程序 3 下拉菜单
- 在引导程序多选下拉菜单上创建工具提示
- 如何从引导程序的下拉菜单中获取这两个值
- 如何将值从引导程序的下拉菜单发送到php
- 如何使用 jquery 关闭引导程序下拉菜单
- 文本字段引导程序内的下拉菜单
- 引导程序下拉菜单没有't显示
- 当点击隐藏下拉菜单-引导
- 如何防止下拉菜单引导子菜单单击关闭父下拉菜单