1

hoverなしでネストされたドロップダウンメニューを強制しようとしています。現在、以下のコードは、 hoverでアクティブ化された場合にのみ、ネストされたドロップダウン メニューのみを表示します。クリックだけで強制したいので、モバイル版のウェブサイトでは問題が発生します。私が達成しようとしている効果は次のようになります: http://www.meanthemes.com/demo/meanmenu/demo.html

アプローチ:

  1. dropdown-toggleの中に入れてみましたdrop-down-toggleが、入れ子になったドロップダウンが表示されません。

    <div class="nav-collapse collapse">
 <ul class="nav">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Buildings/Land <b class="caret"></b></a>
<ul class="dropdown-menu">

  <li class="dropdown-submenu"><a tabindex="-2" href="#"><img src="icons/huron-river-prot_icon.png" class="icons-images">Huron River Protection</a>
    <ul class="dropdown-menu">
      <li><a href="#"><img src="icons/green-roof_icon.png" class="icons-images">Green Roof</a></li>
      <li><a href="#"><img src="icons/huron-river-prot_icon.png" class="icons-images">Porous pavement</a></li>
      <li><a href="#"><img src="icons/retention-detention_icon.png" class="icons-images">Retention/detention</a></li>
    </ul>
  </li>

   </ul>
      </li>         
</ul>
 </div>
4

1 に答える 1

0

私は似たようなことをしました。私はあなたのためにフィドルを作成します:)

HTML はあなたのものと非常によく似ています。jquery を使用して第 2 レベルのメニューを識別し、クリックするとそれらが開きました。

     $(document).ready(function(){
     $('.dropdown .dropdown').each(function(){
         var $self = $(this);
         var handle = $self.children('[data-toggle="dropdown"]');
         $(handle).click(function(){
             var submenu = $self.children('.dropdown-menu');
             $(submenu).toggle();
             return false;
         });
     });
 });

第 2 レベルのメニューが横に開くように、ブートストラップの上に次の CSS を使用する必要がありました。

.dropdown-menu .dropdown-menu {
top: 0;
left: 100%;
margin: 0;
padding: 0;
}

http://jsfiddle.net/elewinso/Upmx8/

これが役立つことを願っています。

于 2013-09-11T09:36:24.413 に答える