引導 - 導航+分導航顯示和隱藏點擊

Question

我想使導航將具有類似的效果下拉菜單，而不是與子菜單框將顯示選項卡。我做到了，它工作得很好 - 我唯一的問題是，當我點擊按鈕（這很好）時，子菜單會顯示，但當我再次點擊它時，它不會關閉。所以我想要做的是：點擊按鈕 - 子菜單顯示 - 再次點擊相同的按鈕，子菜單隱藏。

<!-- Navigation bar --> 
     <div class="container-narrow"> 
      <ul class="nav nav-pills nav-main"> 
      <li class="nav-size active"><a href="index.php">Home</a></li> 
      <li class="nav-size"><a href="#tab1" data-toggle="tab">About</a></li> 
      <li class="nav-size"><a href="#">Services</a></li> 
      <li class="nav-size"><a href="#">Downloads</a></li> 
       <li class="pull-right"><a href="#tab2" data-toggle="tab"><img src="img/flags/flags12.png" alt="flags" /></a></li> 
       <li class="pull-right"><a href="#">Register</a></li> 
       <li class="pull-right"><a href="#">Login</a></li> 
      </ul> 

        <div class="tab-content"> 
         <div class="tab-pane" id="tab1"> 
          <ul class="nav nav-tabs nav-sub"> 
           <li><a href="#">Services</a></li> 
           <li><a href="#">Site Services</a></li> 
           <li><a href="#">O'Leary Group</a></li> 
          </ul> 
         </div> 
        </div> 

        <div class="tab-content"> 
         <div class="tab-pane" id="tab2"> 
          <ul class="nav nav-tabs nav-sub"> 
           <li class="pull-right"><a href="#"><img src="img/flags/en.png" /> English</a></li> 
           <li class="pull-right"><a href="#"><img src="img/flags/fr.png" /> French</a></a></li> 
           <li class="pull-right"><a href="#"><img src="img/flags/de.png" /> German</a></a></li> 
           <li class="pull-right"><a href="#"><img src="img/flags/pl.png" /> Polish</a></a></li> 
          </ul> 
         </div> 
        </div> 
     </div><!--/Navigation bar --> 

Answer 1

可能值得調查collapse plugin。你可以把它做以下工作的

<!-- Navigation bar --> 
<div class="container-narrow"> 
    <ul class="nav nav-pills nav-main"> 
     <li class="nav-size active"><a href="index.php">Home</a></li> 
     <li class="nav-size"><a href="#tab1" data-toggle="collapse" data-target="#tab1">About</a></li> 
     <li class="nav-size"><a href="#">Services</a></li> 
     <li class="nav-size"><a href="#">Downloads</a></li> 
     <li class="pull-right"><a href="#tab2" data-toggle="tab"><img src="img/flags/flags12.png" alt="flags" /></a></li> 
     <li class="pull-right"><a href="#">Register</a></li> 
     <li class="pull-right"><a href="#">Login</a></li> 
    </ul> 

    <div class="collapse" id="tab1"> 
     <div class="tab-pane" > 
      <ul class="nav nav-tabs nav-sub"> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Site Services</a></li> 
       <li><a href="#">O'Leary Group</a></li> 
      </ul> 
     </div> 
    </div> 

    <div class="tab-content"> 
     <div class="tab-pane" id="tab2"> 
      <ul class="nav nav-tabs nav-sub"> 
       <li class="pull-right"><a href="#"><img src="img/flags/en.png" /> English</a></li> 
       <li class="pull-right"><a href="#"><img src="img/flags/fr.png" /> French</a></a></li> 
      <li class="pull-right"><a href="#"><img src="img/flags/de.png" /> German</a></a></li> 
     <li class="pull-right"><a href="#"><img src="img/flags/pl.png" /> Polish</a></a></li> 
</ul> 
</div> 
</div> 
</div><!--/Navigation bar --> 

它並不完美，但它似乎並不彷彿標籤將呈現您需要開箱即用的行爲。