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

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

DDD

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

原创

831人浏览过

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

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

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

在网页开发中，经常需要创建可展开/折叠的内容区域，以节省空间或按需显示信息。许多开发者习惯于使用JavaScript来控制元素的显示与隐藏，例如通过修改display属性。然而，对于简单的内容切换功能，HTML5提供了一对原生的语义化元素——

和

，它们能够完全在浏览器层面实现这一功能，无需编写任何JavaScript代码，也无需复杂的CSS :target选择器技巧。

理解
和
元素

元素用于创建一个披露小部件，用户可以从中获取额外信息。默认情况下，

元素的内容是隐藏的，除非用户点击其摘要或通过其他方式将其展开。

元素则作为

元素的可见标题。当用户点击

元素时，它会触发其父级

元素内容的展开或折叠。如果没有提供

元素，浏览器会提供一个默认的“详细信息”或“详细”文本作为摘要。

实现内容展开/折叠

使用

和

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

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

<!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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1069">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680048848883.png" alt="音疯">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1069">音疯</a>
                            <p>音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="音疯">
                                <span>178</span>
                            </div>
                        </div>
                        <a href="/ai/1069" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="音疯">
                        </a>
                    </div>
                
        <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>

登录后复制

在上述代码中：

第一个
元素默认是折叠状态。
第二个
元素通过添加 open 属性，在页面加载时会默认处于展开状态。
元素中的文本“点击展开更多信息”或“默认展开的区域”是用户可见的交互点。
及其内部的段落和列表是实际被隐藏或显示的内容。
优势与注意事项
1. 无需JavaScript： 这是最显著的优势。它简化了代码，减少了对外部脚本的依赖，提高了页面加载速度和可靠性。
2. 语义化：
  和
  是具有特定语义的HTML元素，它们清晰地表达了内容的结构和功能，有助于搜索引擎优化（SEO）和代码的可读性。
3. 无障碍性（Accessibility）： 浏览器原生支持这些元素的交互行为，这意味着它们默认就具备良好的键盘导航和屏幕阅读器支持，无需额外编写无障碍代码。
4. 浏览器原生行为： 浏览器会自动处理展开/折叠的逻辑，包括动画（虽然通常是瞬时切换，但可以通过CSS自定义）。
5. 默认样式： 浏览器会为
  和
  提供默认样式，通常包括一个指示展开/折叠状态的小箭头。这些默认样式可以通过CSS进行覆盖和自定义，例如更改箭头的样式或位置。
注意事项：
- CSS自定义： 虽然功能原生，但如果需要更精细的视觉控制（例如自定义展开/折叠图标、动画效果），仍然需要使用CSS。例如，可以使用 summary::before 或 summary::-webkit-details-marker 来控制默认的箭头图标。
- 动画效果： 默认的展开/折叠是即时切换。如果需要平滑的动画效果，可以结合CSS的 transition 属性和 max-height 或 height 属性（配合 overflow: hidden）来模拟，但这会稍微增加CSS的复杂度。
- 兼容性：
  和
  元素在现代浏览器中（包括Chrome, Firefox, Edge, Safari）都得到了良好支持。对于非常旧的浏览器，可能需要提供降级方案或使用JavaScript polyfill，但这种情况在当前网页开发中已相对少见。
总结

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