HTML 添加CSS3过渡展开/折叠

在本文中，我们将介绍如何使用HTML和CSS3过渡效果实现内容的展开和折叠功能。展开和折叠是网页中常见的交互效果，可以让内容更加有层次感，提高用户体验。

阅读更多：HTML 教程

HTML 结构和基础样式

首先，我们需要使用HTML定义一个基本的内容，并为其添加一些基础样式。我们创建一个简单的示例，其中包含一个标题和一个内容区域。HTML结构如下所示：

<div class="container">
  <h3>Title</h3>
  <div class="content">
    <p>Content goes here.</p>
  </div>
</div>

接下来，我们为标题和内容区域定义一些基础样式，使其更易于阅读和理解。我们给标题设置一个背景色和边框，并设置内容区域的高度，使其默认为折叠状态。CSS样式如下：

.container {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

h3 {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 0;
}

.content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

这里我们使用了CSS3的transition属性来定义内容区域的过渡效果，具体细节将在下文中介绍。

添加展开/折叠功能

为了实现展开/折叠功能，我们需要使用JavaScript来动态修改内容区域的高度。我们可以通过点击标题来切换内容的展开和折叠状态。

首先，我们使用JavaScript获取标题和内容区域的元素，然后为标题添加一个点击事件监听器。在点击事件发生时，我们可以通过判断内容区域的高度来决定是展开还是折叠。如果内容区域的高度为0，则将其高度设置为内容的实际高度；如果内容区域的高度不为0，则将其高度设置为0。JavaScript代码如下：

var title = document.querySelector('.container h3');
var content = document.querySelector('.container .content');

title.addEventListener('click', function() {
  if (content.offsetHeight === 0) {
    content.style.height = content.scrollHeight + 'px';
  } else {
    content.style.height = 0;
  }
});

在上述代码中，offsetHeight表示元素的高度，scrollHeight表示元素内容的完整高度。

添加过渡效果

为了使展开和折叠过程更加平滑，我们可以通过添加过渡效果来美化用户体验。在CSS样式中，我们为内容区域添加了transition属性，并指定了高度的过渡时间和过渡效果。

.content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

在上述样式中，height表示要过渡的属性，0.3s表示过渡时间为0.3秒，ease-in-out表示过渡效果是先加速再减速的。

通过添加过渡效果，当我们点击标题时，内容区域将以流畅的动画效果展开或折叠。

示例演示

下面是一个完整的示例，演示了HTML添加CSS3过渡展开/折叠的效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }

    h3 {
      background-color: #f0f0f0;
      padding: 10px;
      margin: 0;
    }

    .content {
      height: 0;
      overflow: hidden;
      transition: height 0.3s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="container">
    <h3>Title</h3>
    <div class="content">
      <p>Content goes here.</p>
    </div>
  </div>

  <script>
    var title = document.querySelector('.container h3');
    var content = document.querySelector('.container .content');

    title.addEventListener('click', function() {
      if (content.offsetHeight === 0) {
        content.style.height = content.scrollHeight + 'px';
      } else {
        content.style.height = 0;
      }
    });
  </script>
</body>
</html>

你可以将上述代码复制到一个HTML文件中并在浏览器中打开，然后尝试点击标题来展开和折叠内容区域。