Angular实现点击下拉菜单外部移除show-list类的问题

针对你需要的两个菜单功能，结合你的Angular指令实现，这里给出修正后的解决方案：

问题分析 #

现有代码的核心问题：

• 点击外部关闭菜单时，removeAllShowListClasses仅清理当前菜单元素下的.show-list，无法覆盖页面上其他独立的菜单组件
• 打开新菜单时，没有先关闭所有已打开的菜单，导致多个菜单同时展开

修正后的指令代码 #

// 全局监听点击事件，处理外部点击关闭菜单
@HostListener('document:click', ['$event'])
handleClickOutside(event: Event) {
  const clickedElement = event.target as Element;
  // 检查点击目标是否在所有菜单之外
  const allMenus = document.querySelectorAll('[menu]'); // 匹配你的菜单指令选择器
  let isInsideAnyMenu = false;
  allMenus.forEach(menu => {
    if (menu.contains(clickedElement)) {
      isInsideAnyMenu = true;
    }
  });

  if (!isInsideAnyMenu) {
    // 移除所有菜单的show-list类
    this.removeAllShowListClasses(document.body);
  } else {
    // 点击在菜单内部，处理菜单切换
    const menu = clickedElement.closest('[menu]') as Element;
    const parentLi = clickedElement.closest('li');
    const isButtonClicked = clickedElement.tagName === 'BUTTON';

    if (menu && parentLi && isButtonClicked) {
      // 先关闭所有已打开的菜单
      this.removeAllShowListClasses(document.body);
      // 再切换当前子菜单
      this.childSelector.forEach((selector) => {
        const childMenus = parentLi.querySelectorAll(selector);
        childMenus.forEach((childMenu: Element) => {
          this.renderer.addClass(childMenu, 'show-list');
        });
      });
    }
  }
}

toggleMenu(menu: any, showSubList: boolean) {
  if (showSubList) {
    if (menu.classList.contains('show-list')) {
      this.renderer.removeClass(menu, 'show-list');
    } else {
      // 打开前先关闭所有其他菜单
      this.removeAllShowListClasses(document.body);
      this.renderer.addClass(menu, 'show-list');
    }
  }
}

removeAllShowListClasses(element: Element) {
  const allChildrenWithShowList = element.querySelectorAll('.show-list');
  allChildrenWithShowList.forEach((child) =>
    this.renderer.removeClass(child, 'show-list')
  );
}

关键修改点说明 #

1. 外部点击关闭所有菜单

   • 监听document:click事件，遍历页面上所有菜单组件，判断点击是否在任意菜单内部
   • 如果不在，调用removeAllShowListClasses并传入document.body，确保清理所有层级的.show-list类

2. 打开新菜单自动关闭旧菜单

   • 在切换当前菜单前，先调用removeAllShowListClasses(document.body)关闭所有已展开的菜单
   • 无论是点击菜单按钮触发切换，还是调用toggleMenu方法，都先执行全局关闭操作

3. 菜单选择器匹配

   • 确保你的菜单指令选择器（比如[menu]）和HTML中的标记一致，这样能正确找到所有菜单组件

HTML结构说明（保持可复用性） #

<div menu>
  <button>一级菜单</button>
  <ul class="menu-list">
    <li>
      <button>二级菜单</button>
      <ul class="menu-list">
        <li>三级菜单项</li>
      </ul>
    </li>
  </ul>
</div>

• 所有菜单容器标记menu指令，子菜单统一使用.menu-list类（对应你指令中的childSelector）
• 点击按钮时触发菜单展开/关闭，确保按钮是菜单切换的唯一触发源

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