BootStrap中解决点击下拉菜单中的元素后，下拉菜单会隐藏的问题

下拉菜单隐藏的原因：JS的事件是向上传播的。（了解详情请看：http://www.cnblogs.com/zhglhtt/articles/3255670.html）

 

解决办法：

1、对指定元素设定even.stopPropagation()

$('.dropdown-menu a.removefromcart').click(function(even) { even.stopPropagation(); });

2、设定一个属性，方便代码重用

$(function() { $("ul.dropdown-menu").on("click", "[data-stopPropagation]", function(even) { even.stopPropagation(); }); });

之后只用添加data-stopPropagation属性就可以对相应元素实现禁止传播了。

例如：

 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
      <li><a tabindex="-1" href="#" data-stopPropagation="true">Action</a></li>
      <li><a tabindex="-1" href="#" data-stopPropagation="true">Another action</a></li>
      <li><a tabindex="-1" href="#" data-stopPropagation="true">Something else here</a></li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#" data-stopPropagation="true">Separated link</a></li>
 </ul>