下拉单击Bootstrap Angular中的另一个下拉列表时自动关闭

Question

我有一个垂直导航菜单，其中有各种下拉菜单。 这些下拉列表是使用ul-li构建的。当点击ul时，'li'向下滑动。 有5个下拉菜单，例如'A'，'B'，'C'，'D'，'E'。现在如果我点击'A'它应该向下滑动它现在，如果我点击'B'它应该向下滑动并且'A'应该自动关闭。在我的情况下，B打开但是'A'仍然保持打开。我希望它在'B'打开时关闭。                                                                                              切换导航                                                                                                                                                          
                                                             

      <div> 

        <ul class="list-unstyled main-menu">
     <li class="dropdown" >
                <label class="navbar-collapse-btn" data-toggle="collapse" data-target="#jay">
                  Jay<b class="caret"></b>
                </label>    
                <div class="collapse" id="jay">
                        <a href="#/emailConfig" class="list-group-item"     >Email Configuration </a>
                        <a href="#/showEmailConfig" class="list-group-item" >Show Email Configuration</a>
                        <a href="#/languageSetting" class="list-group-item" >Language Setting</a>
                </div>
            </li>
            <li class="dropdown" >
                <label class="navbar-collapse-btn" data-toggle="collapse" data-target="#pooja">

                  Pooja<b class="caret"></b>
                </label>
                </a>
                <div class="collapse" id="pooja">
                        <a href="#/initSetting" class="list-group-item" style="background-color:#222;border:none">Init Settings </a>
                        <a href="#/dateSettings" class="list-group-item" style="background-color:#222;border:none">Date and Time Settings</a>
                        <a href="#/configSettings" class="list-group-item" style="background-color:#222;border:none">Config Settings</a>
                </div>
            </li>
            <li class="dropdown">
                <label class="navbar-collapse-btn" data-toggle="collapse" data-target="#raju">
                  Raju<b class="caret"></b>
                </label>
                <div class="collapse" id="raju">
                        <a href="#/home" class="list-group-item" style="background-color:#222;border:none">Add User </a>
                        <a href="#/graph" class="list-group-item" style="background-color:#222;border:none">Graph</a>
                </div>
            </li>
            <li class="dropdown">
                <label class="navbar-collapse-btn" data-toggle="collapse" data-target="#mohit">
                  Mohit<b class="caret"></b>
                </label>
                    <div class="collapse" id="mohit">
                        <a href="#login/" class="list-group-item" style="background-color:#222;border:none">Login </a>
                        <a href="#/AddUserInfo" class="list-group-item" style="background-color:#222;border:none">Add User Info</a>
                        <a href="#/showUserInfo" class="list-group-item" style="background-color:#222;border:none">Show User info</a>
                        <a href="#/mesProtocolSettings" class="list-group-item" style="background-color:#222;border:none">Protocol Settings </a>
                    </div>
            </li>
            <li class="dropdown">
                <label class="navbar-collapse-btn" data-toggle="collapse" data-target="#satyendra">
                  Satyendra<b class="caret"></b>
                </label>
                    <div class="collapse" id="satyendra">
                        <a href="#/createGroup" class="list-group-item" style="background-color:#222;border:none">Create Group </a>
                        <a href="#/showGroupList" class="list-group-item" style="background-color:#222;border:none">Show Group</a>
                        <a href="#/spindleSettings" class="list-group-item" style="background-color:#222;border:none">Spindle Settings</a>
                        <a href="#/openProtocol" class="list-group-item" style="background-color:#222;border:none">Open Protocol</a>

                    </div>
            </li>
            <li class="dropdown">
                <label class="navbar-collapse-btn" data-toggle="collapse" data-target="#rpt">
                  RPT<b class="caret"></b>
                </label>
                    <div class="collapse" id="rpt">
                        <a href="#/restData" class="list-group-item" style="background-color:#222;border:none">Rest Data </a>
                        <a href="#/socketData" class="list-group-item" style="background-color:#222;border:none">Socket data</a>
                    </div>
            </li>

        </ul>
      </div>
    </nav>
</div> `