Angular中Hover Menu与Dropdown重叠问题及解决方案咨询

问题场景 #

• 步骤1：在页面中打开Dropdown（记为component1）
• 步骤2：悬停另一个Dropdown菜单（菜单会在悬停时展开）

此时两个Dropdown出现重叠现象，且尝试过多种方式设置z-index均未生效。

需求 #

是否有办法在其他Dropdown处于展开状态时，限制当前悬停菜单展开？

可行解决方案 #

1. 全局状态管控 #

在项目中维护一个全局状态变量（如isAnyDropdownOpen）：

• 当任意Dropdown被打开时，将该变量设为true；所有Dropdown关闭时设为false
• 对悬停触发的Dropdown，在悬停事件触发前判断该变量：若为true，则阻止展开逻辑执行

2. 事件拦截控制 #

通过事件委托实现临时拦截：

• 当component1打开时，给页面添加鼠标进入事件监听，阻止其他悬停Dropdown的展开事件
• 当component1关闭时，移除该监听
• 伪代码示例：

// 监听component1打开事件
document.querySelector('#component1').addEventListener('open', () => {
  document.body.addEventListener('mouseenter', blockHoverDropdowns, true);
});

// 监听component1关闭事件
document.querySelector('#component1').addEventListener('close', () => {
  document.body.removeEventListener('mouseenter', blockHoverDropdowns, true);
});

// 拦截函数
function blockHoverDropdowns(e) {
  const hoverDropdown = e.target.closest('.hover-trigger-dropdown');
  if (hoverDropdown) {
    e.stopImmediatePropagation();
    // 或直接调用阻止展开的方法
  }
}

3. 组件状态联动（针对UI组件库） #

如果使用第三方UI组件库（如Ant Design、Element UI），可通过组件属性联动控制：

• 以Ant Design为例，给悬停Dropdown添加disabled={isAnyDropdownOpen}属性，当存在已打开的Dropdown时，禁用悬停展开功能
• 若组件支持自定义触发逻辑，可在触发函数中加入状态判断，不符合条件则不执行展开

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