2

ブートストラップで作成されたマルチレベルのドロップダウンがあります。現在、いくつかのレベルを深くナビゲートし、誤ってポインターが現在のドロップダウン リストから外れると、すべてのリストが第 1 レベルまで閉じられます。開いているすべてのドロップダウンを開いたままにし、ドロップダウンの外でクリックした場合にのみ閉じるにはどうすればよいですか? つまり、マウスを宇宙空間に移動したときではなく、宇宙空間をクリックしたときに同じことを行います。

ここに私のデモがあります: 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 に戻ります。

4

1 に答える 1

2

カスタムイベント処理（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開いているドロップダウンにクラスを使用するため、必要に応じて手動で設定/設定解除できます。

于 2013-03-20T11:00:43.643 に答える