Question

我有一个使用bootstrap的多级下拉列表，现在当我导航几个级别深度并且意外地指针从当前下拉列表中出来时，所有列表都关闭直到第一级。只有在下拉列表外单击时，如何才能打开和关闭所有打开的下拉菜单？即，在外太空点击鼠标时也一样，而不是只是在那里移动时。

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

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

Answer 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来打开下拉列表，因此我们可以在需要时手动设置/取消设置。

鼠标停止时保持引导下拉列表

1 个答案: