Bootstrap 防止同时打开多个可折叠元素

Question

我有以下 html 边栏菜单：

<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>

这是一个基本的 Bootstrap 折叠菜单，其中包含一个子菜单，该菜单会在单击 li 元素时展开。

我遇到的问题是假设我有 2 或 3 个这些菜单项都有子菜单。有可能所有这些都可以同时打开，我不喜欢这样，因为随着高度的增加，这会强制滚动溢出，然后显示侧边菜单的滚动条。

有什么方法可以防止在 Bootstrap 中展开多个元素？

如果有帮助，我正在使用 Laravel 5。

Answer 1

我认为这应该对您有所帮助，请稍微尝试一下以适应您的需要：

<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>

看这里

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

Bootstrap 防止同时打开多个可折叠元素

Bootstrap prevent multiple collapsable elements from being open at the same time

html

php

collapsable

twitter-bootstrap

laravel