如果下拉菜单中发生点击，则防止下拉菜单关闭

Question

我正在使用带有angular的bootstrap并使用bootstrap的下拉模块。 如果内部发生点击，我试图使下拉菜单保持打开状态。

我能够使用event.stopPropagation()实现此目的。 但是，如果我有2个下拉菜单，并且执行以下操作，则此方法不起作用：

方案1 ：（正确行为）

1) Open Dropdown 1
2) Click anywhere inside the dropdown menu, it works perfectly and the menu does not close.
3) Click outside. Menu Closes. Correct behavior.

方案1 ：（意外行为）

1) Open Dropdown1
2) Open Dropdown2

在这种情况下，当我单击dropdown2时，dropdown1菜单应该已经关闭。 但是，这没有发生。

这是我的代码：

<div class="container">
  <div  (click)="openDropdown($event)">
    <div class="btn-group" dropdown>
      <div  dropdownToggle id="pencilColorPicker">
          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> 
      </div>

      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
          role="menu" aria-labelledby="button-basic">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>      
      </ul>
    </div>
  </div>

  <div  (click)="openDropdown($event)">
    <div class="btn-group" dropdown>
      <div  dropdownToggle id="pencilColorPicker">
          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> 
      </div>

      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
          role="menu" aria-labelledby="button-basic">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>      
      </ul>
    </div>
  </div>

</div>

这是我的openDropdown方法：

  openDropdown(e){
    e.stopPropagation();
  }

这是Stackblitz链接： Stackblitz

我的问题是，如果在打开的下拉菜单中发生点击，如何保持下拉菜单的打开状态，但是如果单击在外部任何地方都没有，则关闭菜单。 就我而言，如果外部点击恰好是另一个下拉菜单，则先前打开的下拉菜单不会关闭。

Answer 1

我更新了HTML文件（请参见下文），以便一旦用户单击下拉列表，就直接调用event.stopPropagation（）方法。 似乎可以正常工作，我在这里找到了答案： 如何防止angular-bootstrap下拉菜单关闭（由指令绑定的Unbind Event）

可以从ts文件中删除openDropdown（）方法。 希望这可以帮助！

 <div class="container"> <div> <div class="btn-group" dropdown> <div dropdownToggle id="pencilColorPicker"> <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> </div> <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()" role="menu" aria-labelledby="button-basic"> <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> </ul> </div> </div> <div> <div class="btn-group" dropdown> <div dropdownToggle id="pencilColorPicker"> <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> </div> <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()" role="menu" aria-labelledby="button-basic"> <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> </ul> </div> </div> </div>