单击特定列表项时取消引导下拉菜单上的隐藏事件答案

【问题标题】：Cancel hide event on bootstrap dropdown when a specific list item has been clicked单击特定列表项时取消引导下拉菜单上的隐藏事件
【发布时间】：2016-02-25 07:17:55
【问题描述】：

我有一个具有以下 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 时不关闭下拉菜单（hide.bs.dropdown 事件已取消）。

不幸的是，下拉菜单的事件对象没有提供有关单击下拉菜单的哪个项目的任何信息。

作为公认的答案，我还考虑了其他引导替代方案，它们在风格上类似于下拉菜单，但具有更大的事件对象灵活性。

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

$(function () {
    $(".quantity-increase-by-ten").on("click", function (e) {
        e.stopPropagation();
    });
});

将停止调用链并防止引导程序关闭下拉菜单。

【讨论】：

优秀。出于某种原因，我认为 preventDefault 也应该这样做，但显然不是。

【解决方案2】：

preventDefault()对<li>的点击事件会产生想要的效果吗？

$(".quantity-increase-by-ten").on("click", function(){
    preventDefault();
    //<li> click code here...
});

【讨论】：

没有。在下拉菜单的父元素上触发事件“hide.bs.dropdown”。
@Whiplash450 感谢您的意见。我需要调用preventDefault 而不是stopPropagation 以防止下拉菜单隐藏:-)

【解决方案3】：

你只需要停止点击的传播：

$('.quantity-increase-by-ten').click(function(e) {
    e.stopPropagation();
});

我希望这是您正在寻找的解决方案。

【讨论】：