css点击按钮展开折叠

在网页设计中，有很多展开折叠的效果，常见于网页中展示内容过多时，为了节省空间，把一部分信息折叠起来，需要时点击按钮展开查看，这种效果一般使用 CSS 实现。

首先，在 HTML 中添加一个按钮：

<button>展开查看</button> 

然后，为按钮定义样式，使它看起来像链接一样。

button {
  background-color: transparent;
  border: none;
  color: #0077cc;
  text-decoration: underline;
  cursor: pointer;
}
 

接下来，定义需要折叠起来的内容的样式，一开始是不显示的：

.content {
  display: none;
}
 

最后，在 CSS 中定义点击按钮展开折叠效果的样式：

button:focus + .content {
  display: block;
}
 

这段 CSS 代码的意思是，当按钮被点击时，找到下一个同级的元素，也就是 .content，将其显示出来。

实现了这段代码，就可以在网页中使用展开折叠效果了。不过，还可以对样式进行改进，比如添加平滑过渡效果，使展开折叠更加自然。