如何在使用纯css点击元素后隐藏div

Question

实际上，我正在Vue中构建一个CSS主菜单，当鼠标悬停时，它工作得很好，当鼠标移出时，它会弹出，而当鼠标移动时，它是隐藏的，但我怎么能在点击时隐藏菜单呢；a"；超链接？

我试过了；。菜单a:active{display:none；}"；，但失败了。

.menu {
display: none;
}
.menu a {
display: block;
}
.main:hover .menu {
display: block;
}

<div class="main">
<button>Main Menu Title</button>
<div class="menu">
<a>Sub Menu Title</a>
</div>
</div>

Answer 1

.menu a:active { display: none; }只有在按下鼠标按钮直到松开时才会工作。不幸的是，您将无法使用纯CSS来实现这个想法。我建议你在点击时添加额外的类，例如：

.hidden {
display: hidden;
}

但是您必须使用JavaScript。

Answer 2

在我看来，我认为你有一个非常强大的工具，但你正在使用它。Vue.js可以毫不费力地完成你想要的任务。

<script setup>
import { ref } from 'vue'
const showMenu = ref(false)
const ToggleMenu = () => {
showMenu.value = !showMenu.value  
}
</script>
<template>
<div class="main">
<button @click="ToggleMenu">Main Menu Title</button>
<div v-if="showMenu" class="menu">
<a>Sub Menu Title</a>
</div>
</div>
</template>
<style>
.menu a {
display: block;
}
</style>