Bootstrap 3 - 切換 - 2個按鈕，2個元素 - 如何顯示/隱藏？

Question

我正在爲devs構建一個佈局模板，以使用Bootstrap 3.3.6集成到他們的AngularJS/Bootstrap應用程序中。這種佈局具有左側導航上下文菜單，當打開主頁內容的頂部時，它可以滑動到頂部，或者可以選擇「釘住」打開，然後將主要內容推向右側。

導航本身的形式是包含兩個按鈕的無序列表。這個想法是，當一個按鈕被點擊時，子菜單內容的相關div被切換到顯示（使用bootstrap'collapse'和'in'）類。任何其他子菜單內容div元素都應該設置爲不顯示（沒有'in'類）。

這變得棘手。如果您只是單擊一個按鈕或另一個按鈕來控制它的相關內容元素，則它可以正常工作，切換顯示相關內容。但是，如果您再次單擊每個按鈕而沒有再次單擊相同按鈕以關閉其相關內容，則內容div的行爲是意外的，其中第二個導航按鈕被點擊會覆蓋第一個導航按鈕的行爲，並且儘管點擊了第一個導航按鈕，內容仍然存在再次。

我的期望是，菜單按鈕需要作爲真正的切換功能，只顯示相關內容，並且不顯示所有其他菜單內容div。

下面是對資產淨值的標記和它的相關內容的div：

<div class="filter-bar pull-left"> 

    <ul class=""> 

     <li><!-- NAV ITEM 1 --> 
      <button type="button" 
      id="left-nav-toggle-menu" 
      class="left-nav-toggle mnc-filter-icn" 
      title="menu"> 
       <i class="fa fa-list-ul fa-fw"></i> 
      </button> 
     </li> 

     <li><!-- NAV ITEM 2 --> 
      <button type="button" 
      id="left-nav-toggle-filters" 
      class="left-nav-toggle mnc-filter-icn" 
      title="filters"> 
       <i class="fa fa-filter fa-fw"></i> 
      </button> 
     </li> 

    </ul> 

</div> 

<div class="collapse push-menu-content"><!-- NAV ITEM 1 CONTENT --> 

    <div class="clearfix"> 

     <button type="button" 
     class="close left-nav-pin pull-right" 
     aria-label="Pin"> 
      <i class="fa fa-thumb-tack"></i> 
     </button> 

    </div> 

    <ul> 
     <li>Item 01</li> 
     <li>Item 02</li> 
     <li>Item 03</li> 
    </ul> 

</div> 

<div class="collapse push-filter-content"><!-- NAV ITEM 2 CONTENT --> 

    <div class="clearfix"> 

     <button type="button" 
     class="close left-nav-pin pull-right" 
     aria-label="Pin"> 
      <i class="fa fa-thumb-tack"></i> 
     </button> 

    </div> 

    <ul> 
     <li>Filter 1 Category</li> 
     <li>Filter 2 Category</li> 
     <li>Filter 3 Category</li> 
    </ul> 
</div> 

現在js函數來切換導航內容：

$(document).ready(function(){ 
    $("button#left-nav-toggle-menu").click(function(){ 
     $("div.collapse.push-menu-content").toggleClass("in"); 
    }); 
    $("button#left-nav-toggle-filters").click(function(){ 
     $("div.collapse.push-filter-content").toggleClass("in"); 
    }); 
}); 

我不是一個js或引導大師對於這個問題，我只是使用Bootstrap文檔（collapse和toggleClass）來創建這些函數。我需要一些知道Bootstrap的人的幫助來修改它們，以便使用Bootstrap和jQuery的內置功能，導航按鈕可以正確切換內容。

任何幫助非常感謝！

Answer 1

如果我理解正確的話，你想從任何打開的div刪除.in類：

$("button#left-nav-toggle-menu").click(function(){ 
    $("div.collapse.push-filter-content").removeClass("in"); 
    $("div.collapse.push-menu-content").toggleClass("in"); 
}); 
$("button#left-nav-toggle-filters").click(function(){ 
    $("div.collapse.push-menu-content").removeClass("in"); 
    $("div.collapse.push-filter-content").toggleClass("in"); 
});