[分享]css3展开收缩简单实例

CSS3 可以实现一些很有趣的效果，其中之一就是展开收缩的效果。下面将介绍一个简单的实例。HTML代码： 标题 展开/收缩 内容1 内容2 CSS代码： .box { border: 1p...

CSS3 可以实现一些很有趣的效果，其中之一就是展开收缩的效果。下面将介绍一个简单的实例。

HTML代码：
<div class="box">
    <div class="header">
        <h2>标题</h2>
        <a href="javascript:;" class="toggle">展开/收缩</a>
    </div>
    <div class="content">
        <p>内容1</p>
        <p>内容2</p>
    </div>
</div>

CSS代码：
.box {
    border: 1px solid gray;
    margin-bottom: 20px;
}
.header {
    background-color: gray;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.expanded .content {
    max-height: 1000px;
} 

上面是 HTML 和 CSS 代码，现在来讲解一下代码实现的步骤。

首先我们创建了一个 box，它包含一个标题和内容，标题中有一个“展开/收缩”的链接。然后，我们设置.box 的边框，这样它就有了一个矩形的外框。.header 的背景色是灰色的，字体颜色是白色的，给人以醒目的感觉。

在.content 中我们设置了最大高度为 0，这样内容就隐藏了起来。然后我们通过 CSS3 中的 transition 属性设置了一个 0.3s 的动画，在展开或收缩操作时，内容会缓慢地展开或收缩。.expanded .content 选择器的作用是，当.box 被添加了一个 expanded 类时，.content 的最大高度会变成 1000px，这样就能展开内容了。

最后，在 JavaScript 中，我们设置一个 toggle 函数来实现展开收缩的功能。当用户点击“展开/收缩”链接时，我们可以通过操作 Dom 元素来给.box 添加或移除 expanded 类。

这就是一个简单的展开收缩效果的实现方式。它能提供一个更好的用户体验，并让页面不至于显得太过拥挤。