Bootstrap 3 - складной список, который не рушится должным образом

Question

Я использую Bootstrap 3 для создания вертикального складного навигационного меню. Документы кажутся довольно прямыми. Попытка сделать это, используя только теги данных - *. ПОЦЕЛУЙ.

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

Может кто-нибудь указать, куда я иду не так?

jsfiddle

<li><a data-toggle="collapse" data-parent="#menu" href="#one">One</a> 
     <ul id="one" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </li> 

    <li><a data-toggle="collapse" data-parent="#menu" href="#two">Two</a> 
     <ul id="two" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </li> 

</ul> 

Answer 1

Ах ... Классы панели были трюк ... The Javascript должен быть их использованием как селекторы.

От bootstrap.js: this.$parent.find('> .panel > .in')

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

Спасибо за подсказки ...

<ul id="menu"> 

    <li class="panel"> 
     <a data-toggle="collapse" data-parent="#menu" href="#one">One</a> 
     <ul id="one" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </li> 

    <li class="panel"> 
     <a data-toggle="collapse" data-parent="#menu" href="#two">Two</a> 
     <ul id="two" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </li> 

    <li class="panel"> 
     <a data-toggle="collapse" data-parent="#menu" href="#three">Three</a> 
     <ul id="three" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </li> 

</ul> 

Answer 2

Причина заключается в использовании ul и li. Использовать, как описано в документации

Working Demo

HTML

<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"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </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"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
      Collapsible Group Item #3 
     </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
</div> 

Answer 3

Складные дочерние элементы, то есть элементы Li должны быть обернутой внутри блока элемента, имеющего класс «» панели. Просто установка атрибута data-parent для #menu не будет работать. Поэтому вам нужно перестроить свой HTML.

Вы можете попробовать что-то вроде этого (стили не фиксированы, чтобы она выглядела, как вы делали раньше) -

<div id="menu"> 
    <div class="panel"> 
    <a data-toggle="collapse" data-parent="#menu" href="#one">One</a> 
     <ul id="one" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    <a data-toggle="collapse" data-parent="#menu" href="#two">Two</a> 
     <ul id="two" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </div> 
</div>