javascript - 折叠/展开所有菜单项。 - HTML/JS/CSS/ Bootstrap 3

Question

左边是我的代码做的，右边是我想要它做的。单击菜单项时，它会很好地折叠，但我希望能够在之后取消折叠它们，并且如果我愿意，能够折叠所有菜单项。

    $('.nav-second').on('show.bs.collapse', function () {
        $('.nav-second.in').collapse('hide');
    });

html

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <li class="sidebar-brand"></li>
        <li>
            <a href="main.html"><i class="material-icons">home</i></a>
        </li>
        <li>
            <a href="#overall" data-toggle="collapse" aria expanded="false">Overall </a>
            <ul id="overall" class="nav-second collapse">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
            </ul>
        </li>
        <li>
            <a href="#dashboard" data-toggle="collapse" aria expanded="false">Dashboard </a>
            <ul id="dashboard" class="nav-second collapse">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
            </ul>
        </li>
        <li>
            <a href="#service" data-toggle="collapse" aria expanded="false">Service </a>
            <ul id="service" class="nav-second collapse">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
            </ul>
        </li>
        <li>
    </ul>

Answer 1

如果您需要这种方法，只需删除该 jQuery 代码即可。

我是说这个:

$('.nav-second').on('show.bs.collapse', function () {
        $('.nav-second.in').collapse('hide');
    });