Bootstrap gleichzeitig mehrere zusammenklappbaren Elemente verhindern offen

Question

Ich habe folgende HTML-Seitenleiste Menü:

<li {{{ (Request::is('bookings/*') }}} data-toggle="collapse" data-target="#bookings"> 
    <a href="#" id="bookings-menu-item"><i class="fa fa-address-book" aria-hidden="true"></i> Bookings <i class="fa fa-chevron-down" aria-hidden="true"></i></a> 
</li> 
<ul class="sub-menu collapse" id="bookings"> 
    <li class="collapsed"><a href="{{ route('bookings') }}">All Bookings</a></li> 
    <li class="collapsed" ><a href="{{ route('bookings.create') }}">Add New</a></li> 
</ul> 

<li {{{ (Request::is('bookings/*') || Request::is('bookings') ? 'class=active' : '') }}} data-toggle="collapse" data-target="#item2"> 
    <a href="#" id="bookings-menu-item"><i class="fa fa-address-book" aria-hidden="true"></i> Item 2 <i class="fa fa-chevron-down" aria-hidden="true"></i></a> 
</li> 
<ul class="sub-menu collapse" id="item2"> 
    <li {{{ (Request::is('bookings') ? 'class=active' : 'collapsed') }}}><a href="{{ route('bookings') }}">All Bookings</a></li> 
    <li {{{ (Request::is('bookings/create') ? 'class=active' : 'collapsed') }}} ><a href="{{ route('bookings.create') }}">Add New</a></li> 
</ul> 

Dies ist eine grundlegende Bootstrap collapse Menü, das ein Untermenü enthält, die angeklickt wird, wenn das li Element dehnt .

Das Problem, das ich habe, ist sagen wir haben 2 oder 3 dieser Menüpunkte, die alle Untermenüs haben. Es besteht die Möglichkeit, dass alle gleichzeitig geöffnet werden können. Mir gefällt das nicht, da dies bei steigender Höhe einen Scroll-Überlauf erzwingt, der dann eine Bildlaufleiste für das Seitenmenü anzeigt.

Gibt es eine Möglichkeit, zu verhindern, dass mehrere Elemente in Bootstrap erweitert werden?

Ich benutze Laravel 5, wenn das hilft.

Answer 1

Ich denke, das Ihnen helfen soll, mit ihm spielen nur ein wenig an Ihre Bedürfnisse anpassen:

<div class="row"> 
    <div class="col"> 
     <ul class="nav nav-stacked" id="accordion1"> 
      <li class="panel"> <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a> 

       <ul id="firstLink" class="collapse"> 
        <li>SubTest1</li> 
        <li>SubTest1</li> 
        <li>SubTest1</li> 
       </ul> 

      </li> 
      <li class="panel"> <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a> 

       <ul id="secondLink" class="collapse"> 
        <li>SubTest2</li> 
        <li>SubTest2</li> 
        <li>SubTest2</li> 
        <li>SubTest2</li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

es

https://codepen.io/anon/pen/ZaMOxN