引导折叠的导航栏在单击子菜单后不会保持折叠状态

Question

在引导程序中，我可以使用以下代码展开和折叠 2 个菜单。但是当我展开菜单并单击子菜单时，子菜单不会保持折叠状态..

当我将此行从 class="collapse list-unstyled" 更改为 class="collapse list-unstyled show" 时，当我单击下一个主菜单时，菜单会折叠并且不会缩小...

<?php include('header.php'); ?>
    <div class="wrapper">
        <!-- Sidebar  -->
        <nav id="sidebar">

            <ul class="list-unstyled components top_admin">

            </ul>
            <ul class="list-unstyled components">
                <li>
                    <a href="dashboard.php" data-toggle="collapse" aria-expanded="false" >
                        <i class="fa fa-tachometer" aria-hidden="true"></i>                     
                        <span>DASHBOARD </span>                                                     
                    </a>
                </li>               
                <li>
                    <a href="#my_note1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="fa fa-hand-o-up" aria-hidden="false"></i>

                        <span>My Notes1</span>
                    </a>
                    <ul class="collapse list-unstyled " id="my_note1">
                        <li>
                            <span class="small_menu"><a href="page1.php">CN</a></span>
                            <a class="la_cls" href="page1.php">Create Note</a>                          
                        </li>

                    </ul>
                </li>               
                 <li>
                    <a href="#my_note2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="fa fa-hand-o-up" aria-hidden="false"></i>

                        <span>My Notes2</span>
                    </a>
                    <ul class="collapse list-unstyled " id="my_note2">
                        <li>
                            <span class="small_menu"><a href="page1.php">CN</a></span>
                            <a class="la_cls" href="page1.php">Create Note</a>                          
                        </li>
                        <li>
                            <span class="small_menu"><a href="#">SN</a></span>
                            <a class="la_cls" href="#">Search Notes</a>                              
                        </li>                       
                    </ul>
                </li>             
            </ul>

        </nav>

  </div>

单击子菜单后，我需要子菜单应该保持折叠状态，然后单击另一个主菜单。任何人请帮助我，我应该怎么做才能解决这个问题。提前谢谢..

Answer 1

<header role="banner" id="top" class="navbar navbar-static-top">

  <div class="navbar-header">
    <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="animbrand"><a href="#" class="navbar-brand">M-Panel</a></div>
  </div>

  <div class="collapse navbar-collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class=""><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-list-alt"></span> Offers <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> All Offer Details</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-pencil"></span> Create Offer ID</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-book"></span> Reports <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> Click Report</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> Live Report</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> This Month Revenue</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> Last Month Revenue</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> News Reports</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Accounts <b class="caret"></b></a>
        <ul class="dropdown-menu"> 
          <li class=""><a href="#"><span class="glyphicon glyphicon-align-justify"></span> View Accounts</a></li>
          <li class=""><a href="#"><span class="glyphicon glyphicon-pencil"></span> Add Account</a></li>
        </ul>
      </li> 
    </ul> 

    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" >
          <span></span>
          <small>Welcome,</small>   User <b class="caret"></b></a>
        <ul class="dropdown-menu"> 
          <li><a href="#"><i class="glyphicon glyphicon-off"></i> Logout</a></li>
        </ul>
      </li> 
    </ul>
  </div>
</div>