Bootstrap 4 Nav Menu

Question

我有个问题。我有一个Bootstrap 4菜单：

<div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <img class="pic" src="pic.jpg" style="float: left; height:15em alt="gym logo">  
                </li>
                <li class="space"> NO TEXT</li>
                <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>

                <li class="nav-item">
                    <a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" data-target="#submenu1"> Reports &nbsp; <i class="fas fa-angle-double-down"></i></a>
                    <div class="collapse fade" id="submenu1" aria-expanded="false">
                        <ul class="flex-column pl-3 nav">
                            <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Orders</a></li>
                           <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Customers</a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>    
        </div>

默认情况下，它已折叠。点击订单或客户菜单后如何进行扩展？

谢谢 ！

Answer 1

在show课程中添加collapse课程。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <img class="pic" src="pic.jpg" style="float: left; height:15em alt="gym logo">  
                </li>
                <li class="space"> NO TEXT</li>
                <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>

                <li class="nav-item">
                    <a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" data-target="#submenu1"> Reports &nbsp; <i class="fas fa-angle-double-down"></i></a>
                    <div class="collapse fade show" id="submenu1" aria-expanded="false">
                        <ul class="flex-column pl-3 nav">
                            <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Orders</a></li>
                           <li class="nav-item"><a class="nav-link py-0 text-warning" href="#">Customers</a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>    
        </div>

Answer 2

谢谢 ！

但是，如果我有更多带孩子的菜单，当我点击其中一个时，每个人都会被扩展。

你知道如何分别控制每个菜单的展开/折叠吗？