导航

Keep Bootstrap dropdown open on click

Posted on 2012-12-10 10:40  immiki  阅读(305)  评论(0)    收藏  举报

http://stackoverflow.com/questions/10480697/keep-bootstrap-dropdown-open-on-click

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

解决方法

$('.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的元素点击时停止传播事件

 

 

<ulclass="dropdown-menu"><li>
        <-- Do not close when clicking this link -->
        <ahref="#"data-stopPropagation="true">
            ...
        </a></li><li>
        <-- Do not close when clicking this checkbox -->
        <inputtype="checkbox"data-stopPropagation="true" ... ></li>

    <-- Do not close when clicking anything in this LI -->
    <lidata-stopPropagation="true">
        ...
    </li></ul>

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