【问题标题】:Bootstrap dropdown menu close on click inside引导下拉菜单在点击内部时关闭
【发布时间】:2017-11-02 10:49:05
【问题描述】:
我有以下代码:
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 标签之一时,下拉菜单不会自动隐藏。
请帮我解决这个问题,
谢谢大家
【问题讨论】:
标签:
javascript
jquery
html
twitter-bootstrap
drop-down-menu
【解决方案1】:
另一个建议...
使用函数处理悬停,里面有元素和事件。因此,您知道何时进入鼠标,何时离开鼠标。您可以使用函数属性来保存计时器,并在需要时将其清除。
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);
【解决方案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>