在内部单击时关闭Bootstrap下拉菜单

Question

我有以下代码：

 function dosomething(id, event){ event.preventDefault(); event.stopPropagation(); // dosomething } 

 <div class="btn-group"> <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="toggle">click</a> <ul class="dropdown-menu options_drop pull-right"> <li><a href="javascript:void(0);" onclick="dosomething(111,event)">do some thing1</a></li> <li><a href="javascript:void(0);" onclick="dosomething(111,event)">do some thing2</a></li> </ul> </div> 

我使用下拉菜单，但是单击两个Li标签之一时，下拉菜单不会自动隐藏。 请帮我解决这个问题，

谢谢大家

Answer 1

另一个建议

使用函数处理悬停，内部有element和event。 因此，您知道何时进入鼠标以及何时离开鼠标。 您可以使用函数属性保存计时器，并在需要时将其清除。

http://jsfiddle.net/blackjim/jw7Uz/3/

 var handleHover = function(evObj){ var $this = $(this); if(!$this.hasClass('open')){ return true; } if(evObj.type === 'mouseleave'){ // on mouseleave... handleHover.timer = setTimeout(function(){ $this.removeClass('open'); },2000); } else if(evObj.type === 'mouseenter'){ // on mouseenter... if(handleHover.timer){ // find timer and clear it clearTimeout(handleHover.timer); delete handleHover.timer; } } }; $('#myDropDown').hover(handleHover); 

Answer 2

假设您想在每次单击时隐藏所有li，请尝试以下操作：

 $("ul li").click(function () { $("li").hide("slow") }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="btn-group"> <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="toggle">click</a> <ul class="dropdown-menu options_drop pull-right"> <li><a href="javascript:void(0);">do some thing1</a></li> <li><a href="javascript:void(0);">do some thing2</a></li> </ul> </div>