Implement bootstrap's dropdown-menu (drop-down menu) method that does not close after clicking (transfer)
Description of the problem, in the drop-down menu, add other elements, such as the <a> mentioned by the original author and the <input> I actually use. The reason for the event propagation will be that the drop-down menu is also hidden.
Solution
1
$('.dropdown-menu a.removefromcart').click(function(e) {
e.stopPropagation();
});
Specifies that the click event of the element to be operated stops propagating
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>
之后需要时加上该属性即可。