實現bootstrap的dropdown-menu(下拉菜單)點擊后不關閉的方法 (轉)

 

實現bootstrap的dropdown-menu(下拉菜單)點擊后不關閉的方法

問題描述，在下拉菜單中，添加其他元素，例如，原文作者所述的<a>和我自己實際用到的<input>，如果不加處理的話，那么在點擊需要操作的元素的時候，由於事件傳播的原因將會出現下拉菜單也隱藏掉的情況。

解決方法

1

$('.dropdown-menu a.removefromcart').click(function(e) {
    e.stopPropagation();
});
指定要操作的元素的click事件停止傳播

2

$(function() {
    $("ul.dropdown-menu").on("click", "[data-stopPropagation]", function(e) {
        e.stopPropagation();
    });
});
定義屬性值data-stopPropagation的元素點擊時停止傳播事件
<ul class="dropdown-menu">
    <li>
        <-- Do not close when clicking this link -->
        <a href="#" data-stopPropagation="true">
            ...
        </a>
    </li>
    <li>
        <-- Do not close when clicking this checkbox -->
        <input type="checkbox" data-stopPropagation="true" ... >
    </li>

    <-- Do not close when clicking anything in this LI -->
    <li data-stopPropagation="true">
        ...
    </li>
</ul>
之后需要時加上該屬性即可。