Angular中如何实现多个头部下拉菜单互斥展开不重叠

核心思路 #

你之前的closeAllMenus方法失效，基本是这几个原因：要么遍历关菜单时把当前点击要展开的菜单也一起关闭了，要么没区分菜单展开/收起的toggle事件触发时机，要么自己维护的显隐布尔值和<details>标签原生的open属性状态不同步。
正确实现逻辑很简单：

• 给三个下拉菜单对应的<details>标签统一加模板引用变量，直接操作DOM实例，避免多状态源不同步
• 绑定原生toggle事件，每次菜单状态变化时判断：如果当前菜单是展开状态，就把其余所有菜单的open属性移除
• 不额外维护独立的显隐布尔值，以<details>原生的open属性作为唯一状态源

具体代码实现 #

header.component.html 调整 #

给三个菜单分别加模板变量，绑定toggle事件传入当前菜单实例：

<header class="global-header">
  <!-- 语言选择菜单 -->
  <details #langMenu (toggle)="handleMenuToggle(langMenu)">
    <summary class="menu-trigger">语言选择</summary>
    <div class="dropdown-panel">
      <!-- 语言选项内容省略 -->
    </div>
  </details>

  <!-- 消息预览菜单 -->
  <details #msgMenu (toggle)="handleMenuToggle(msgMenu)">
    <summary class="menu-trigger">消息中心</summary>
    <div class="dropdown-panel">
      <!-- 消息列表内容省略 -->
    </div>
  </details>

  <!-- 用户菜单 -->
  <details #userMenu (toggle)="handleMenuToggle(userMenu)">
    <summary class="menu-trigger">用户账户</summary>
    <div class="dropdown-panel">
      <!-- 用户操作项内容省略 -->
    </div>
  </details>
</header>

header.component.ts 逻辑 #

用@ViewChildren批量获取所有菜单实例，编写互斥展开逻辑：

import { Component, QueryList, ViewChildren, ElementRef } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  // 批量获取页面中所有头部下拉菜单的DOM实例
  @ViewChildren('langMenu, msgMenu, userMenu') allDropdownMenus!: QueryList<ElementRef<HTMLDetailsElement>>;

  handleMenuToggle(currentActiveMenu: HTMLDetailsElement): void {
    // 仅当当前菜单是展开动作触发的事件时，才执行关闭其他菜单的逻辑
    // 避免菜单收起时触发toggle导致逻辑循环
    if (!currentActiveMenu.open) {
      return;
    }

    // 遍历所有菜单，非当前触发的菜单全部移除open属性强制收起
    this.allDropdownMenus.forEach(menuRef => {
      const menuElement = menuRef.nativeElement;
      if (menuElement !== currentActiveMenu) {
        menuElement.removeAttribute('open');
      }
    });
  }
}

避坑提示 #

• 不要给<details>标签加[attr.open]做双向绑定：原生details的toggle事件会自动维护open属性状态，手动做属性绑定很容易出现事件触发和属性更新不同步，导致菜单关不上、点不开的异常
• 不要用click事件绑定到summary标签上替代toggle事件：click事件无法捕获键盘操作、JS脚本触发的菜单状态变化，会出现状态漏判
• 后续新增头部下拉菜单时，只需要给新的<details>标签加对应模板引用变量，加到@ViewChildren的选择器列表里就行，核心的互斥逻辑不用修改

内容的提问来源于stack exchange，提问作者NeonH