bootstrap 4左侧菜单一次只展开一个下拉菜单

Question

我需要使用引导程序4和角度2来实现左手导航。左侧导航栏中将有多个下拉菜单，但一次只能打开一个下拉菜单。即，当单击下拉列表时，它应该打开。如果有打开的任何下拉菜单，则应将其关闭。

我在应用程序中有当前代码。单击此代码后，带有此代码的下拉列表将打开。但是，要关闭下拉菜单，我必须再次单击它。单击另一个下拉链接后，下拉菜单不会自动关闭。

 <div class="parent-site" *ngFor="let Data of DataList; let nav = index;"> // looping array DataList to get individual parent titles
                     <div *ngIf="Data.children !== null">
                         <div class="nav-link" data-toggle="collapse"
                              data-target="#nav"
                              aria-expanded="false"
                              aria-controls="menu">
                           <span class="link-click">
                             <div class="dropdown-divider"></div>
                             <a>{{Data.title.value}}</a>
                         </span>
                           <span class="menu__icon--open">
                             <i class="fa custom-accordion-up-arrow fa-angle-down">&nbsp;</i>
                           </span>
                           <span class="menu__icon--close">
                             <i class="fa custom-accordion-up-arrow fa-angle-up">&nbsp;</i>
                           </span>
                         </div>
                          <nav class="menu collapse" id="nav">
                              <div *ngFor="let child of Data.children; let i = index"> // looping array DataList to get children of parent title
                                  <a>{{child.title.value}}</a>
                               </div>
                          </nav>
                      </div>
                  <div *ngIf="Data.children == null">
                    <div class="nav-link" data-toggle="collapse"
                         aria-expanded="false"
                         aria-controls="menu">
                      <span class="link-click">
                        <div class="dropdown-divider"></div>
                        <a>{{Data.title.value}}</a>
                      </span></div>
                  </div>
</div>

DataList : 
{ "pages":"parent1": [
            {
                "childpages": "child1",
                "childpages": "child2",
                "childpages": "child3",
            }
        ],
        "parent2": [
            {
                "childpages": "child1",
                "childpages": "child2",
                "childpages": "child3",
            }
        ]
        }