鼠标离开时保持引导下拉菜单答案

【问题标题】：Keep bootstrap dropdown when mouse is out鼠标离开时保持引导下拉菜单
【发布时间】：2013-03-09 07:56:10
【问题描述】：

我有一个用引导程序制作的多级下拉菜单，现在当我导航几级深度并且不小心指针从当前下拉列表中出来时，所有列表都关闭到第一级。仅当在下拉列表外部单击时，如何才能使所有打开的下拉列表保持打开和关闭？即当鼠标点击外层空间时做同样的事情，而不是刚刚移动到那里。

这是我的演示：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>

当您导航到第 3 层，然后鼠标指针从当前列表中出来时，它会立即返回第 1 层。

【问题讨论】：

标签： javascript html twitter-bootstrap drop-down-menu

【解决方案1】：

我已经通过一些自定义事件处理（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 使用 open 类打开下拉菜单，因此我们可以在需要时手动设置/取消设置。

【讨论】：