无需JavaScript，利用HTML原生能力实现内容展开/折叠功能-html教程-PHP中文网

无需JavaScript，利用HTML原生能力实现内容展开/折叠功能

DDD

发布： 2025-10-26 10:25:21

原创

744人浏览过

无需JavaScript，利用HTML原生能力实现内容展开/折叠功能

本文详细阐述如何利用html5原生的`ails>`和`

`元素，无需javascript即可轻松实现网页内容的展开与折叠功能。这种方法不仅代码简洁、语义化，还提供了良好的用户体验和无障碍支持，是构建交互式内容区块的理想选择。

在网页开发中，经常需要创建可展开/折叠的内容区域，以节省空间或按需显示信息。许多开发者习惯于使用JavaScript来控制元素的显示与隐藏，例如通过修改display属性。然而，对于简单的内容切换功能，HTML5提供了一对原生的语义化元素——<details>和<summary>，它们能够完全在浏览器层面实现这一功能，无需编写任何JavaScript代码，也无需复杂的CSS :target选择器技巧。

理解 <details> 和 <summary> 元素

<details> 元素用于创建一个披露小部件，用户可以从中获取额外信息。默认情况下，<details> 元素的内容是隐藏的，除非用户点击其摘要或通过其他方式将其展开。

<summary> 元素则作为 <details> 元素的可见标题。当用户点击 <summary> 元素时，它会触发其父级 <details> 元素内容的展开或折叠。如果没有提供 <summary> 元素，浏览器会提供一个默认的“详细信息”或“详细”文本作为摘要。

实现内容展开/折叠

使用 <details> 和 <summary> 元素实现内容展开/折叠非常简单直观。以下是一个基本的示例：

立即学习“Java免费学习笔记（深入）”；

Gnomic智能体平台

国内首家无需魔法免费无限制使用的ChatGPT4.0，网站内设置了大量智能体供大家免费使用，还有五款语言大模型供大家免费使用~

查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML原生内容展开/折叠</title>
  <style>
    /* 可选的CSS样式，用于美化或覆盖默认行为 */
    details {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 4px;
    }

    summary {
      font-weight: bold;
      cursor: pointer;
      list-style: none; /* 移除默认的箭头 */
      outline: none; /* 移除点击时的焦点边框 */
      padding: 5px 0;
    }

    /* 自定义展开/折叠图标 */
    summary::-webkit-details-marker {
      display: none; /* 隐藏Webkit浏览器的默认箭头 */
    }

    summary::before {
      content: '▶ '; /* 未展开时的图标 */
      display: inline-block;
      margin-right: 5px;
      transition: transform 0.2s ease;
    }

    details[open] summary::before {
      content: '▼ '; /* 展开时的图标 */
      transform: rotate(90deg); /* 旋转图标 */
    }

    .content-area {
      padding-top: 10px;
      line-height: 1.6;
      color: #333;
    }
  </style>
</head>
<body>

  <h1>使用 <details> 和 <summary> 实现内容切换</h1>

  <div>
    <details>
      <summary>点击展开更多信息</summary>
      <div class="content-area">
        <p>这是被隐藏的内容区域。当您点击上方的“点击展开更多信息”时，这部分内容就会显示出来。再次点击则会折叠。</p>
        <p>此方法无需任何JavaScript，完全由浏览器原生支持，具有良好的语义化和无障碍性。</p>
        <ul>
          <li>优势一：无需JavaScript</li>
          <li>优势二：语义化HTML</li>
          <li>优势三：良好的无障碍支持</li>
        </ul>
      </div>
    </details>

    <details open>
      <summary>默认展开的区域</summary>
      <div class="content-area">
        <p>这个区域在页面加载时默认就是展开的，因为在 `<details>` 标签上添加了 `open` 属性。</p>
      </div>
    </details>
  </div>

</body>
</html>

登录后复制

在上述代码中：

第一个 <details> 元素默认是折叠状态。
第二个 <details> 元素通过添加 open 属性，在页面加载时会默认处于展开状态。
<summary> 元素中的文本“点击展开更多信息”或“默认展开的区域”是用户可见的交互点。
<div class="content-area"> 及其内部的段落和列表是实际被隐藏或显示的内容。

优势与注意事项

无需JavaScript： 这是最显著的优势。它简化了代码，减少了对外部脚本的依赖，提高了页面加载速度和可靠性。
语义化： <details> 和 <summary> 是具有特定语义的HTML元素，它们清晰地表达了内容的结构和功能，有助于搜索引擎优化（SEO）和代码的可读性。
无障碍性（Accessibility）： 浏览器原生支持这些元素的交互行为，这意味着它们默认就具备良好的键盘导航和屏幕阅读器支持，无需额外编写无障碍代码。
浏览器原生行为： 浏览器会自动处理展开/折叠的逻辑，包括动画（虽然通常是瞬时切换，但可以通过CSS自定义）。
默认样式： 浏览器会为 <details> 和 <summary> 提供默认样式，通常包括一个指示展开/折叠状态的小箭头。这些默认样式可以通过CSS进行覆盖和自定义，例如更改箭头的样式或位置。

注意事项：

CSS自定义： 虽然功能原生，但如果需要更精细的视觉控制（例如自定义展开/折叠图标、动画效果），仍然需要使用CSS。例如，可以使用 summary::before 或 summary::-webkit-details-marker 来控制默认的箭头图标。
动画效果： 默认的展开/折叠是即时切换。如果需要平滑的动画效果，可以结合CSS的 transition 属性和 max-height 或 height 属性（配合 overflow: hidden）来模拟，但这会稍微增加CSS的复杂度。
兼容性： <details> 和 <summary> 元素在现代浏览器中（包括Chrome, Firefox, Edge, Safari）都得到了良好支持。对于非常旧的浏览器，可能需要提供降级方案或使用JavaScript polyfill，但这种情况在当前网页开发中已相对少见。

总结

<details> 和 <summary> 元素为实现网页内容展开/折叠功能提供了一个强大而简洁的原生HTML解决方案。通过利用这些语义化标签，开发者可以避免不必要的JavaScript代码，提升网页性能、可维护性及用户体验，尤其是在构建FAQ、手风琴菜单或任何需要按需显示内容的场景中，它们都是一个理想的选择。

以上就是无需JavaScript，利用HTML原生能力实现内容展开/折叠功能的详细内容，更多请关注php中文网其它相关文章！