css点击隐藏显示下拉

CSS 点击隐藏显示下拉是一种常见的网页设计技巧，通过 CSS 代码控制元素的显示和隐藏，实现点击操作后显示下拉内容。下面是一个简单的示例：

.dropdown {
  display: none;
}
.show {
  display: block;
}
 

在 HTML 中创建一个下拉按钮，将其与下拉内容的容器相关联：

<button onclick="myFunction()">下拉按钮</button>
<div id="myDropdown" class="dropdown">
  <a href="#">选项一</a>
  <a href="#">选项二</a>
  <a href="#">选项三</a>
</div> 

然后，在 JavaScript 中添加一个函数来切换下拉内容的显示和隐藏：

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
 

这个函数会在按钮点击时将下拉容器的 class 切换为 show，根据 CSS 代码的定义，下拉容器将显示出来。再次点击按钮时，下拉容器的 class 再次切换为 dropdown，下拉内容就会隐藏。