javascript - 单击特定列表项时取消 Bootstrap 下拉菜单上的隐藏事件

Question

我有一个具有以下 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>

当 li.quantity-increase-by-ten 被点击时，我希望下拉菜单不关闭(hide.bs.dropdown 事件被取消)。

不幸的是，下拉菜单的事件对象没有提供任何关于下拉菜单中的哪一项被点击的信息。

作为已接受的答案，我还考虑了其​​他 Bootstrap 替代方案，这些替代方案在风格上类似于下拉菜单，并且表现得像下拉菜单，但具有更多的事件对象灵 active 。

Answer 1

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

将停止沿链向上的调用并防止 Bootstrap 关闭下拉菜单。