[英]Cancel hide event on bootstrap dropdown when a specific list item has been clicked
I have a bootstrap dropdown menu with the following HTML structure: 我有一个带有以下HTML结构的bootstrap下拉菜单:
<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>
I want the dropdown NOT to close (hide.bs.dropdown event cancelled) when li.quantity-increase-by-ten
has been clicked. 当li.quantity-increase-by-ten
时,我希望下拉列表不关闭(hide.bs.dropdown事件已取消)。
Unfortunately the event object of the dropdown does not give any information concerning which item of the dropdown has been clicked. 遗憾的是,下拉列表的事件对象不会提供有关单击下拉列表项的任何信息。
As accepted answers I also consider other bootstrap alternatives that can stylistically resemble and behave as a dropdown but with more event object flexibility. 作为已接受的答案,我还考虑其他引导程序替代方案,这些替代方案在风格上可以像下拉列表一样,但具有更多的事件对象灵活性。
$(function () {
$(".quantity-increase-by-ten").on("click", function (e) {
e.stopPropagation();
});
});
Will stop the call going up the chain and prevent bootstrap from closing the drop down menu. 将停止呼叫上行链路并阻止引导程序关闭下拉菜单。
You just need to stop the propagation of the click: 您只需要停止点击的传播:
$('.quantity-increase-by-ten').click(function(e) {
e.stopPropagation();
});
I hope this is the solution you are looking for. 我希望这是您正在寻找的解决方案。
Would preventDefault()
on the click event of the <li>
produce the desired effect? 对于<li>
的click事件, preventDefault()
会产生预期的效果吗?
$(".quantity-increase-by-ten").on("click", function(){
preventDefault();
//<li> click code here...
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.