单击里面的Bootstrap下拉菜单关闭

时间:2017-06-01 10:23:26

标签: javascript jquery html twitter-bootstrap drop-down-menu

我有以下代码:



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>
&#13;
&#13;
&#13;

我使用下拉下拉菜单,但是当我点击两个 Li 标记中的一个时,下拉列表不会自动隐藏。 请帮我解决这个问题,

全部谢谢

2 个答案:

答案 0 :(得分:0)

另一个建议......

使用函数处理悬停,在内部有元素和事件。因此,您知道何时进入鼠标以及何时离开鼠标。您可以使用功能属性来保存计时器,并在需要时将其清除。

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

&#13;
&#13;
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);
&#13;
&#13;
&#13;

答案 1 :(得分:0)

假设您想在每次点击时隐藏所有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>