如何使用纯CSS实现点击元素后隐藏div？Vue菜单场景求解

你之前尝试的.menu a:active { display: none; }无效，原因有两点：

• 该样式仅作用于<a>标签本身，不会影响父级的.menu容器；
• :active伪类仅在鼠标按住链接的瞬间生效，松开后样式就会失效，无法实现持久隐藏菜单的效果。

结合Vue框架的特性，推荐用数据驱动的方式控制菜单显示状态，具体实现步骤如下：

1. 定义控制变量 #

在Vue组件的data中添加一个布尔变量，用于控制菜单的显示与隐藏：

export default {
  data() {
    return {
      isMenuVisible: false
    }
  }
}

2. 修改HTML结构 #

通过v-show绑定变量，同时给父容器添加鼠标移入/移出事件，给链接添加点击事件：

<div class="main" 
     @mouseenter="isMenuVisible = true" 
     @mouseleave="isMenuVisible = false">
    <button>Main Menu Title</button>
    <div class="menu" v-show="isMenuVisible">
        <a @click="isMenuVisible = false">Sub Menu Title</a>
    </div>
</div>

3. 调整CSS样式 #

移除原来依赖hover的CSS规则，因为现在菜单的显示状态由Vue变量控制：

.menu {
  display: none;
}

.menu a {
  display: block;
}

/* 移除 .main:hover .menu 这一行 */

可选：保留CSS hover效果的兼容方案 #

如果想保留原生CSS的hover触发效果，同时兼容Vue的点击控制，可以调整CSS让类优先级更高：

.menu {
  display: none;
}

.menu a {
  display: block;
}

.main:hover .menu,
.menu.show {
  display: block;
}

对应的HTML改为用类绑定：

<div class="main" 
     @mouseenter="isMenuVisible = true" 
     @mouseleave="isMenuVisible = false">
    <button>Main Menu Title</button>
    <div class="menu" :class="{ show: isMenuVisible }">
        <a @click="isMenuVisible = false">Sub Menu Title</a>
    </div>
</div>

额外说明 #

如果你的<a>标签是跳转外部链接，页面刷新后菜单自然会隐藏；如果是Vue单页路由（如vue-router的<router-link>），上面的点击事件会在跳转前就隐藏菜单，完全符合需求。

内容的提问来源于stack exchange，提问作者Leo.W