引导下拉菜单在点击内部时关闭

Posted 2023-05-08

【中文标题】引导下拉菜单在点击内部时关闭

【英文标题】：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 标签之一时，下拉菜单不会自动隐藏。 请帮我解决这个问题，

谢谢大家

【参考方案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>

【讨论】：

感谢支持但不是但这不是我需要的

所以请解释一下你需要什么