【问题标题】: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>

    【讨论】:

    • 感谢支持但不是但这不是我需要的
    • 所以请解释一下你需要什么
    猜你喜欢
    • 2014-04-28
    • 2012-06-07
    • 1970-01-01
    • 2014-09-25
    • 2018-02-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多