如何不使用JavaScript实现点击后子菜单隐藏？

DevOps 小满

2026-8-6

无需JavaScript实现点击子菜单后隐藏

可行，利用CSS的:target和:has()伪类组合就能实现，以下是具体实现方案：

核心思路

给每个子菜单项设置锚点链接，点击后触发:target状态
通过:has()伪类检测父容器是否包含处于:target状态的子菜单项
满足条件时隐藏整个子菜单及背景

代码示例

HTML结构

<nav class="main-nav">
  <div class="menu-item">
    <a href="#" class="menu-trigger">主菜单</a>
    <div class="submenu">
      <a href="#package" class="submenu-item">Package</a>
      <a href="#settings" class="submenu-item">Settings</a>
    </div>
  </div>
</nav>

<!-- 锚点目标，用于触发:target状态，不占用页面空间 -->
<div id="package"></div>
<div id="settings"></div>

CSS样式

/* 默认隐藏子菜单 */
.submenu {
  display: none;
  background-color: red;
  padding: 10px;
  margin-top: 5px;
}

/* hover主菜单时显示子菜单 */
.menu-item:hover .submenu {
  display: block;
}

/* 当子菜单项被点击（锚点激活），隐藏子菜单 */
.menu-item:has(.submenu-item:target) .submenu {
  display: none;
}

/* 避免锚点触发页面滚动 */
#package, #settings {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
}