如何为HTML的<details>元素实现<summary>内容的平滑展开效果

原生<details>元素点击后内容会瞬间显示/隐藏，要实现类似CSS过渡的平滑展开效果，可以通过以下方法实现：

核心思路 #

把详情内容包裹在一个可控制高度的容器中，利用CSS的transition属性结合max-height实现高度变化的平滑动画（直接用height:auto无法触发过渡，因此用max-height模拟）。

完整代码示例 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<title>My Project</title>
<style>
/* 基础样式优化 */
details {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
  margin-bottom: 1em;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
  cursor: pointer;
  list-style: none;
}

/* 隐藏默认箭头（可选） */
summary::-webkit-details-marker {
  display: none;
}

/* 内容容器，实现过渡效果 */
.details-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0 0.5em;
}

/* 展开时的样式 */
details[open] .details-content {
  max-height: 500px; /* 设置足够大的值以容纳所有内容 */
  transition: max-height 0.3s ease-in;
  padding: 0.5em;
  border-top: 1px solid #ddd;
  margin-top: 0.5em;
}
</style>
</head>
<body>
  <details>
    <summary>摘要1</summary>
    <div class="details-content">
      Line 1<br>
      Line 2<br>
      Line 3<br>
      Line 4<br>
    </div>
  </details>
</body>
</html>

关键说明 #

1. 容器包裹内容：必须把详情文本放在.details-content这类容器里，才能单独控制其高度变化
2. max-height过渡：初始设置max-height:0隐藏内容，展开时设置一个足够大的max-height（比如500px），配合transition属性实现平滑展开/收起
3. 样式自定义：可根据需求调整边框、内边距、过渡时间等样式，比如把0.3s改成0.5s让动画更平缓
4. IE11兼容提示：IE11本身不支持原生<details>元素，若需兼容，需额外用JavaScript模拟展开/收起行为，并通过添加/移除类来控制容器高度的过渡

内容的提问来源于stack exchange，提问作者albert