Bootstrap 3 - Toggle - 2 кнопки, 2 элемента - Как показать/скрыть?

Question

Я создаю шаблон макета для разработчиков, чтобы интегрировать их в приложение AngularJS/Bootstrap, используя Bootstrap 3.3.6. В этом макете имеется контекстное меню навигации слева, которое открывается при просмотре верхней части содержимого главной страницы или, возможно, может быть «закреплено» открыто, а затем подталкивает основное содержимое вправо.

Навигационная система находится в виде неупорядоченного списка, содержащего две кнопки. Идея состоит в том, что при нажатии кнопки соответствующий div для содержимого подменю переключается для отображения (используя классы «обвалы» и «в»). Любые другие элементы содержимого содержимого субменю должны быть установлены так, чтобы они не отображались (без класса «in»).

Это становится сложным. Если вы просто нажимаете одну кнопку или другую, чтобы контролировать ее соответствующий элемент контента, он отлично работает, переключая отображение соответствующего контента. Однако, если вы нажмете каждую кнопку, не нажимая одну и ту же кнопку еще раз, чтобы закрыть соответствующий контент, поведение разделов содержимого неожиданно, когда вторая кнопка навигации нажата, переопределяет поведение первого и его содержимое сохраняется, несмотря на то, что нажатие первой кнопки навигации еще раз.

Мое ожидание состоит в том, что кнопки меню должны функционировать как истинные переключатели, в которых отображается только соответствующий контент, а все остальные разделы содержимого меню не отображаются.

Ниже разметки нав и это релевантное содержание дива:

<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 гуру В этом случае я просто использовал документацию Bootstrap (collapse и toggleClass) для создания этих функций. Мне нужна помощь от кого-то, кто знает Bootstrap в их модификации, чтобы навигационные кнопки функционировали как истинные переключатели для содержимого с использованием встроенных функций Bootstrap и jQuery.

Любая помощь очень ценится!

Answer 1

Если я вас правильно понял, вы хотите удалить .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"); 
});