点击选中hover触发的下拉菜单项后临时隐藏、后续hover仍可生效的实现咨询

实现思路 #

• 新增一个优先级高于hover显示规则的临时隐藏CSS类，用来覆盖hover触发的显示状态
• 点击下拉选项时给下拉菜单添加临时隐藏类，实现选中后立刻隐藏的效果
• 监听导航容器的鼠标移出事件，移出时移除临时隐藏类，保证下次hover时下拉可以正常弹出

完整代码 #

HTML（原有结构无需调整） #

<div class="navbutton_container">
    <button onclick="someFunction()"><p>Title</p></button>
    <div class="nav_dropdown">
        <button onclick="someFunction()"><p>Content1</p></button>
        <button onclick="someFunction()"><p>Content2</p></button>
        <button onclick="someFunction()"><p>Content3</p></button>
        <button onclick="someFunction()"><p>Content4</p></button>
    </div>
</div>

CSS #

/* 给导航容器加相对定位，保证下拉菜单定位正确 */
.navbutton_container {
  position: relative;
  display: inline-block;
}
.navbutton_container > .nav_dropdown {
  display: none;
  opacity: 0;
}
/* hover时显示下拉 */
.navbutton_container:hover > .nav_dropdown {
  display: block;
  opacity: 1;
  position: absolute;
  /* 可根据需求调整下拉弹出的位置 */
  top: 100%;
  left: 0;
}
/* 临时隐藏类，权重高于普通hover选择器，无需使用!important */
.navbutton_container:hover > .nav_dropdown.temp-hidden {
  display: none;
  opacity: 0;
}

JavaScript #

// 适配多个导航容器的场景
const navContainers = document.querySelectorAll('.navbutton_container');
navContainers.forEach(container => {
  const dropdown = container.querySelector('.nav_dropdown');
  const dropdownItems = dropdown.querySelectorAll('button');
  // 点击下拉选项时添加临时隐藏类
  dropdownItems.forEach(item => {
    item.addEventListener('click', () => {
      dropdown.classList.add('temp-hidden');
    });
  });
  // 鼠标移出导航容器时移除临时隐藏类，恢复下次hover的触发能力
  container.addEventListener('mouseleave', () => {
    dropdown.classList.remove('temp-hidden');
  });
});

效果验证 #

• 选中下拉选项后，下拉立刻隐藏，不会遮挡页面内容
• 只要鼠标还停留在导航容器范围内，下拉会保持隐藏状态
• 鼠标完全移出导航容器后再移入，hover触发下拉的效果正常生效

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