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

【问题标题】：Prevent dropdown from closing if click is happening inside the dropdown menu如果在下拉菜单中发生点击，防止下拉菜单关闭
【发布时间】：2019-08-22 22:50:28
【问题描述】：

我正在使用带有角度的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

在这种情况下，dropdown1 菜单应该在我单击 dropdown2 的那一刻关闭。但这并没有发生。

这是我的代码：

<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

我的问题是，如果点击发生在打开的下拉菜单内，我如何保持下拉菜单打开，但如果点击发生在外面的任何地方，则将其关闭。就我而言，如果外部点击恰好是另一个下拉菜单，则之前打开的下拉菜单不会关闭。

【问题讨论】：

标签： javascript angular twitter-bootstrap bootstrap-4

【解决方案1】：

我更新了您的 HTML 文件（见下文），以便在用户单击下拉菜单后直接调用 event.stopPropagation() 方法。似乎有效，我在这里找到了答案：How to prevent an angular-bootstrap dropdown from closing (Unbind Event which was bound by a directive)

openDropdown() 方法可以从 ts 文件中移除。希望这会有所帮助！

<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>

【讨论】：