Bootstrap Закрыть меню аккордеона

Question

Я новичок в бутстрапе и создал навигационное меню с использованием бутстрапа-аккордеона. Когда я нажимаю на любую ссылку, он открывает аккордеон, но не закрывает открытый аккордеон. Как я могу это достичь?

Я создал скрипку: http://jsfiddle.net/4qk86/

мой аккордеон код является:

<li> 
     <div class="accordion-heading "> <a href="#accDash" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> 
             <span class="item-icon fontello-icon-monitor"></span> 
             <i class="chevron fontello-icon-right-open-3"></i> Dashboards 
            </a> 
     </div> 
     <ul class="accordion-content nav nav-list collapse in" id="accDash"> 
      <li class="active"> <a href="dashboard-one.html"> 
              <i class="fontello-icon-right-dir"></i> 
              <span class="hidden-tablet">Dashboard</span> Demo 1 
             </a> 
      </li> 
      <li> <a href="dashboard-two.html"> 
              <i class="fontello-icon-right-dir"></i> 
              <span class="hidden-tablet">Dashboard</span> Demo 2 
             </a> 
      </li> 
     </ul> 
    </li> 

Answer 1

бит кода в вашем JSFiddle работает правильно: меню аккордеон разворачивать и сворачивать, когда они щелкнули. Возможно, в другом месте кода вашего сайта есть проблема, которая предотвращает это. Обычно, убедитесь, что ваш код jQuery находится в пределах $(document).ready();, решает проблемы с правильным кодом, который не будет работать.

Answer 2

На странице API Bootstrap указано, что вы должны указать атрибут data-parent. Затем попробуйте добавить к элементам data-parent = "accDash".

http://getbootstrap.com/javascript/#collapse См

Надеется, что это помогает.

Answer 3

Вот пример из Bootstrap site (укороченный только для двух панелей). В принципе, внешнему div присваивается идентификатор, скажем id="accordion" и для создания эффекта аккордеона (где, когда вы открываете другой сложенный элемент, текущий закрывается), вы устанавливаете data-toggle="collapse" data-parent="#accordion" для каждого заголовка.

С другой стороны, если вы хотите, чтобы каждый складной панели независимо друг от друга, так что более чем одна панель может быть открыта в то время, просто изменить его data-toggle="collapse" data-target="collapseOne" где collapseOne относится к идентификатору панели, что нажатие на заголовок открывается. (Таким образом, следующая панель будет ссылаться, например, на collapseTwo).

Вот jfiddle а также для того, чтобы поиграть.

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     First collapsible panel 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Second collapsible panel 
     </div> 
    </div> 
    </div> 
</div>