点击按钮添加CSS类隐藏菜单且不影响后续交互的实现方法

核心问题是使用display: none隐藏菜单后，元素会完全脱离文档流——不仅用户看不到，CSS的相邻兄弟选择器(.nav-menu:hover + .mega-menu)和hover事件也无法定位到该元素，导致后续hover操作无法触发菜单重新显示。

解决方案：替换display: none，用可见性属性控制并保留元素在文档流中 #

我们用visibility和opacity替代display: none实现隐藏，同时通过CSS优先级控制，让hover操作能强制覆盖隐藏状态：

1. 修改CSS样式

将原有的.hide类替换为语义更清晰的.closed，并调整hover选择器优先级：

.container {
  max-height: 112px;
  position: relative; /* 新增：让mega-menu的absolute定位基于容器 */
}

.nav-menu {
  min-height: 112px;
  padding-left: 5.6rem;
  padding-right: 5.6rem;
  background-color: green;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.nav-menu li {
  list-style: none;
  pointer-events: all;
}

.nav-menu li a {
  color: white;
  text-decoration: none;
  padding-top: 47px;
  padding-bottom: 47px;
}

.nav-menu li a:hover{
  text-decoration: underline;
}

.mega-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: lightblue;
  width: 100%;
  min-height: 250px;
  top: 128px;
  text-align: center;
  transition: visibility 0s, opacity 0.3s ease; /* 新增过渡动画，提升体验 */
}

/* 正常hover显示逻辑 */
.nav-menu:hover + .mega-menu,
.mega-menu:hover {
  visibility: visible; 
  opacity: 1;
}

/* 关闭状态样式 */
.mega-menu.closed {
  visibility: hidden;
  opacity: 0;
}

/* 强制让hover覆盖关闭状态 */
.nav-menu:hover + .mega-menu.closed,
.mega-menu.closed:hover {
  visibility: visible;
  opacity: 1;
}

2. 修改JavaScript逻辑

将添加hide类改为添加closed类：

const desktopMegaMenu = document.querySelector('.mega-menu');
const desktopCloseBtn = document.querySelector('.close-btn-desktop');

desktopCloseBtn.addEventListener('click', () => {
    desktopMegaMenu.classList.add('closed');
});

可选优化 #

如果希望用户点击关闭后，只有主动hover导航才打开菜单（避免鼠标误触触发），可以添加hover时移除关闭状态的逻辑：

const navMenu = document.querySelector('.nav-menu');

// 鼠标悬停导航时，移除关闭状态
navMenu.addEventListener('mouseenter', () => {
    desktopMegaMenu.classList.remove('closed');
});

这样处理后，点击关闭按钮仅暂时隐藏菜单，用户再次hover导航项时，菜单能正常重新显示，完全不会阻碍后续交互。

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