鼠标出来时保持引导下拉 [英] Keep bootstrap dropdown when mouse is out

问题描述

我有一个使用自举的多级下拉列表，现在当我浏览几个级别深，意外的指针从当前的下拉列表中排除时，所有列表都关闭到第一级。只有当在下拉式选单之外点击时，才能保持打开和关闭所有打开的下拉列表？也就是说，当外部空间鼠标点击时，不要这样做。

这是我的演示： http://jsfiddle.net/n8XJb/

  ul class =nav nav-pills> 
< li class =dropdown> 
< a href =＃data-toggle =dropdownclass =dropdown-toggle> Dropdown< b class =caret>< / b>< / a> 
< ul class =dropdown-menuid =menu1> 
< li class =dropdown-submenu> 
< a href =＃>级别1< / a> 
< ul class =dropdown-menu> 
< li class =dropdown-submenu> 
< a href =＃>级别2< / a> 
< ul class =dropdown-menu> 
< li>< a href =＃>级别3< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< / ul> 
  

当您导航到3级，然后鼠标指针从当前列表中退出时，它将返回

解决方案

我已经通过一些自定义事件处理解决了这个问题（ http://jsfiddle.net/n8XJb/2/ ）：

 code> jQuery（'。dropdown-menu li a'）。mouseover（function（e）{
 e.stopPropagation（）; 
 jQuery（this）.parent（） .find（'li'）。each（function（）{
 jQuery（this）.removeClass（'open'）; 
}）; 
 jQuery（this）.parent（）。 addClass（'open'）; 
}）; 
 
 jQuery（'。dropdown-toggle'）。click（function（e）{
 jQuery（this）.parent（）。find（'li' {
 jQuery（this）.removeClass（'open'）; 
}）; 
}）; 
  

Bootstrap使用类打开打开下拉列表，所以我们可以在需要时手动设置/取消设置。

I have a multilevel dropdown made with bootstrap, now when I navigate few levels deep and accidentally pointer comes out of current dropdown list, all lists are closed until 1st level. How can I keep all opened dropdowns open and close only when it is clicked outside dropdown? i.e. do the same when mouse is clicked on outer space, not when just moved there.

Here is my demo: http://jsfiddle.net/n8XJb/

<ul class="nav nav-pills">
    <li class="dropdown">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" id="menu1">
        <li class="dropdown-submenu">
          <a href="#">Level 1</a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a href="#">Level 2</a>
              <ul class="dropdown-menu">
                <li><a href="#">Level 3</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
</ul>

When you navigate to Level 3, and then mouse pointer comes out of current list, it goes back to Level 1 instantly.

解决方案

I have solved it by some custom event handling (http://jsfiddle.net/n8XJb/2/):

jQuery('.dropdown-menu li a').mouseover(function(e) {
    e.stopPropagation();
    jQuery(this).parent().parent().find('li').each(function() {
        jQuery(this).removeClass('open');
    });
    jQuery(this).parent().addClass('open');
});

jQuery('.dropdown-toggle').click(function(e) {
    jQuery(this).parent().find('li').each(function() {
        jQuery(this).removeClass('open');
    });
});

Bootstrap uses class open for open dropdowns, so we can set/unset it manually whenever needed.

这篇关于鼠标出来时保持引导下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！