ポップオーバー内のすべてのドロップダウンを一度に

Question

プルオーバーから別々のドロップダウンを開くことに問題があります。 LINK

プルオーバー内のアイテムがクリックされるたびに、既存のすべてのドロップダウンが表示されることがわかります。

必ず必要なドロップダウンが問題はあなただけの1 <div class="dropdown">内にラップ2つのドロップダウン<ul class="dropdown-menu">を持っていることのように見える？：

<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
Level 1<span class="caret"></span></a> 

Answer 1

現れるようにするには、次の区別するために、どのような方法があります。これは、ブートストラップがこれらのクラス名を使用して何を表示するかを決定するため、実際に両方のドロップダウンが表示されます。

したがって、2番目のドロップダウンを自分自身にラップすると、<div>の動作が得られます。私はまた、のような、それ自身の<div>ような構造にid="parent"までにレベルを移動したい：

<div id="parent"> 
    <div class="dropdown" style="position:relative"> 
     <!-- Level 1 Cascade --> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1<span class="caret"></span></a> 
     <!-- Items within Level 1 Cascade --> 
     <ul class="dropdown-menu"> 
     <!-- Level 2 Cascade --> 
     <li> 
      <a class="trigger right-caret">Level 2</a> 
      <ul class="dropdown-menu sub-menu"> 
      <!-- Level 3 Cascade --> 
      <li><a href="#">Level 3</a></li> 
      <!-- Level 3 Cascade --> 
      <li> 
       <a class="trigger right-caret">Level 3</a> 
       <ul class="dropdown-menu sub-menu"> 
       <!-- so on and so forth --> 
       <li><a href="#">Level 4</a></li> 
       <li><a href="#">Level 4</a></li> 
       <li> 
        <a class="trigger right-caret">Level 4</a> 
        <ul class="dropdown-menu sub-menu"> 
        <li><a href="#">Level 5</a></li> 
        <li><a href="#">Level 5</a></li> 
        <li><a href="#">Level 5</a></li> 
        </ul> 
       </li> 
       </ul> 
      </li> 
      <!-- Level 3 Cascade --> 
      <li><a href="#">Level 3</a></li> 
      </ul> 
     </li> 
     <!-- Level 2 Cascade --> 
     <li><a href="#">Level 2</a></li> 
     <!-- Level 2 Cascade --> 
     <li><a href="#">Level 2</a></li> 
     <li> 
      <a class="trigger right-caret">Level 2</a> 
      <ul class="dropdown-menu sub-menu"> 
      <!-- Level 3 Cascade --> 
      <li><a href="#">Level 3</a></li> 
      <!-- Level 3 Cascade --> 
      <li> 
       <a class="trigger right-caret">Level 3</a> 
       <ul class="dropdown-menu sub-menu"> 
       <!-- so on and so forth --> 
       <li><a href="#">Level 4</a></li> 
       <li><a href="#">Level 4</a></li> 
       <li> 
        <a class="trigger right-caret">Level 4</a> 
        <ul class="dropdown-menu sub-menu"> 
        <li><a href="#">Level 5</a></li> 
        <li><a href="#">Level 5</a></li> 
        <li><a href="#">Level 5</a></li> 
        </ul> 
       </li> 
       </ul> 
      </li> 
      <!-- Level 3 Cascade --> 
      <li><a href="#">Level 3</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    <div class="dropdown" style="position:relative"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1-2<span class="caret"></span></a> 
     <!-- Items within Level 1 Cascade --> 
     <ul class="dropdown-menu"> 
     <!-- Level 2 Cascade --> 
     <li><a href="#">Level 2</a></li> 
     </ul> 
    </div> 
    </div> 

私はそれに応じてバイオリンを変更した： http://jsfiddle.net/mjcwly/srporvqh/