2

HTMLマークアップを使用した「ドロップダウン」マルチレベルメニューではなく、Twitterブートストラップ「ドロップダウン」を使用しています。

   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
      <li><a tabindex="-1" href="#">Action</a></li>
      <li><a tabindex="-1" href="#">Another action</a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
              <li><a tabindex="-1" href="#">Action</a></li>
              <li><a tabindex="-1" href="#">Another action</a></li>
              <li><a tabindex="-1" href="#">Something else here</a>
                  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                     <li><a tabindex="-1" href="#">Action</a></li>
                     <li><a tabindex="-1" href="#">Another action</a></li>

                 </ul>
              </li>
              <li class="divider"></li>
              <li><a tabindex="-1" href="#">Separated link</a></li>
          </ul>
      </li>
      <li><a tabindex="-1" href="#">Something else here</a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
              <li><a tabindex="-1" href="#">Action</a></li>
              <li><a tabindex="-1" href="#">Another action</a></li>
              <li><a tabindex="-1" href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a tabindex="-1" href="#">Separated link</a></li>
          </ul>
      </li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>

質問があります。サブメニューを表示するクリックイベントを追加できますか?

4

1 に答える 1

5

サブメニューは css で表示されます。したがって、最初に css (ホバー) を無効にして、クリック イベントをメニュー項目に追加します。

HTML の例:

<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
   <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
    </ul>
  </li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>

css を無効にする:

.dropdown-submenu:hover > .dropdown-menu {
  display: none;
}

javascript でクリックをトリガーします。

$('.dropdown-submenu').click(function(){
  $('.dropdown-submenu > .dropdown-menu').css('display','block');
  return false;
});

例: http://bootply.com/66088

サブメニューが複数ある場合は、それぞれに独自のクラスを与えることに注意してください

于 2013-06-30T09:28:20.407 に答える