实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法

实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法

问题描述，在下拉菜单中，添加其他元素，例如，原文作者所述的<a>和我自己实际用到的<input>，如果不加处理的话，那么在点击需要操作的元素的时候，由于事件传播的原因将会出现下拉菜单也隐藏掉的情况。

解决方法

1

<span style="font-size:18px;">$('.dropdown-menu a.removefromcart').click(function(e) {    e.stopPropagation();});</span>

指定要操作的元素的click事件停止传播

2

<span style="font-size:18px;">$(function() {    $("ul.dropdown-menu").on("click", "[data-stopPropagation]", function(e) {        e.stopPropagation();    });});</span>

定义属性值data-stopPropagation的元素点击时停止传播事件

<span style="font-size:18px;"><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></span>

之后需要时加上该属性即可。