Question

我正在将bootstrap与angular一起使用，并使用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（）方法。似乎可行，我在这里找到了答案：How to prevent an angular-bootstrap dropdown from closing (Unbind Event which was bound by a directive)

可以从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>

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

1 个答案: