纯HTML/CSS实现内容折叠与展开：details和summary元素的妙用-html教程-PHP中文网

纯HTML/CSS实现内容折叠与展开：details和summary元素的妙用

碧海醫心

发布： 2025-10-26 10:56:09

原创

228人浏览过

纯HTML/CSS实现内容折叠与展开：details和summary元素的妙用

本文探讨了如何在不使用javascript的情况下，纯粹依靠html和css实现内容的折叠与展开功能。通过介绍html5新增的`

`和`

`元素，我们将演示如何构建一个原生支持交互的折叠面板，从而简化前端开发并提升用户体验，特别适用于需要轻量级解决方案的场景。

在Web开发中，我们经常需要实现内容的折叠与展开功能，例如常见的问题解答（FAQ）列表、手风琴菜单或可隐藏的详细信息区域。传统的做法通常依赖JavaScript来监听点击事件并动态修改元素的display或height属性。然而，对于追求极致性能和简洁代码的场景，或者出于特定限制（如不允许使用JavaScript），我们可能需要一种纯HTML/CSS的解决方案。

早期的纯CSS方案往往涉及利用:target伪类或隐藏的复选框（input[type="checkbox"]）与label结合，通过改变URL哈希或复选框状态来切换元素的可见性。这些方法虽然可行，但通常实现起来较为复杂，且在交互体验和可访问性方面存在局限性。幸运的是，HTML5引入了两个专门用于此目的的语义化元素：<details>和<summary>，它们提供了一种原生、高效且无需JavaScript的解决方案。

details和summary元素简介

<details>元素用于创建一个“披露小部件”（disclosure widget），用户可以点击它来显示或隐藏额外的内容。它默认是关闭的，点击后会展开。

<summary>元素是<details>元素的第一个子元素，它定义了可见的标题或摘要，用户可以通过点击这个标题来切换<details>元素的展开/折叠状态。

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

这两个元素协同工作，为我们提供了一个开箱即用的内容折叠功能，无需编写任何JavaScript代码。当<details>元素处于展开状态时，它会带有一个open布尔属性，我们可以利用这个属性来通过CSS应用不同的样式。

基本用法示例

使用<details>和<summary>元素非常简单。只需将可折叠内容的标题放在<summary>标签内，而详细内容则放在<details>标签内的<summary>标签之后。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Details/Summary示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>纯HTML内容折叠示例</h1>

        <details>
            <summary>点击此处查看更多信息</summary>
            <p>这里是折叠起来的详细内容。它可以包含段落、列表、图片、表格等任何HTML元素。</p>
            <ul>
                <li>这是一个列表项。</li>
                <li>另一个重要的信息。</li>
                <li>最后一条提示。</li>
            </ul>
            <p>当您点击上方的标题时，这些内容会显示或隐藏。</p>
        </details>

        <details open>
            <summary>默认展开的区域</summary>
            <p>这个`<details>`元素默认是展开的，因为它带了`open`属性。</p>
            <img src="https://via.placeholder.com/150" alt="示例图片" style="max-width: 100%; height: auto;">
        </details>

        <details>
            <summary>常见问题：什么是HTML5？</summary>
            <p>HTML5 是超文本标记语言的第五次重大修订，它引入了许多新特性，如语义化标签、多媒体支持、离线存储等，旨在更好地支持富互联网应用。</p>
        </details>
    </div>

</body>
</html>

登录后复制

在上面的代码中，我们创建了三个可折叠区域。第一个和第三个默认是折叠的，第二个通过添加open属性使其默认展开。用户只需点击<summary>标签内的文本，即可切换相应<details>区域的显示状态。

通过CSS进行样式定制

虽然<details>和<summary>元素提供了原生的交互，但它们的外观通常是浏览器默认的样式，可能不符合您的设计需求。我们可以利用CSS对它们进行定制。

1. 基本样式调整：

妙构

AI分析视频内容，专业揭秘爆款视频

111

查看详情

您可以像对待其他HTML元素一样，为<details>和<summary>设置边框、内边距、背景色、字体等。

details {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 15px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

summary {
    padding: 12px 15px;
    font-weight: bold;
    cursor: pointer;
    list-style: none; /* 移除默认的列表标记 */
    outline: none; /* 移除点击时的焦点轮廓 */
    color: #333;
    display: block; /* 确保summary占据整行，便于点击 */
    position: relative;
    user-select: none; /* 防止文本被选中 */
}

/* 展开内容的样式 */
details > p, details > ul, details > div {
    padding: 0 15px 15px 15px;
    margin-top: 0;
    line-height: 1.6;
    color: #555;
}

登录后复制

2. 自定义展开/折叠图标：

默认情况下，浏览器会在<summary>旁边显示一个小的箭头或三角形图标。我们可以使用::marker伪元素来定制这个图标，或者完全移除它并使用背景图、伪元素等方式自定义。

/* 移除默认的标记 */
summary::-webkit-details-marker {
    display: none; /* 针对WebKit浏览器 */
}

summary::marker {
    display: none; /* 标准属性 */
}

/* 使用伪元素自定义图标 */
summary::before {
    content: '+'; /* 默认显示加号 */
    margin-right: 10px;
    font-size: 1.2em;
    transition: transform 0.2s ease;
    display: inline-block;
    color: #007bff;
}

details[open] summary::before {
    content: '-'; /* 展开时显示减号 */
    transform: rotate(0deg); /* 保持不变，或者可以旋转箭头 */
}

/* 另一种箭头旋转的例子 */
/*
summary::before {
    content: '▶';
    margin-right: 10px;
    transition: transform 0.2s ease;
    display: inline-block;
}

details[open] summary::before {
    transform: rotate(90deg);
}
*/

登录后复制

3. 展开状态下的样式：

当<details>元素被展开时，它会获得open属性。我们可以利用属性选择器details[open]来为展开状态下的元素应用特定样式。

details[open] {
    background-color: #f9f9f9;
    border-color: #c0c0c0;
}

details[open] summary {
    border-bottom: 1px solid #e0e0e0;
    color: #0056b3;
}

登录后复制

通过结合上述CSS规则，您可以创建出高度定制化的折叠面板，使其完美融入您的网站设计。

优势与应用场景

无需JavaScript： 这是最大的优势，减少了页面的JavaScript负载，提升了加载速度和执行效率。
原生支持与可访问性： 作为HTML5标准元素，它们获得了浏览器原生的支持，并且内置了良好的可访问性（例如键盘导航和屏幕阅读器支持），无需额外的工作。
语义化： 明确表达了内容的“披露”性质，有助于搜索引擎理解页面结构。
简洁高效： 代码量少，易于维护。

这些特性使得<details>和<summary>非常适合以下场景：

FAQ（常见问题解答）： 每个问题和答案可以封装在一个<details>块中。
手风琴菜单/折叠面板： 适用于导航菜单或内容分组。
高级设置/可选内容： 隐藏不常用或高级的选项，保持界面整洁。
可展开的描述： 产品详情、文章摘要等。

注意事项

浏览器兼容性： 现代浏览器（Chrome, Firefox, Safari, Edge）对<details>和<summary>的支持良好。但需要注意的是，Internet Explorer（IE）系列浏览器不支持这两个元素。如果您的目标用户群体中包含大量IE用户，则可能需要考虑使用JavaScript回退方案或选择其他实现方式。
复杂交互： 虽然它们提供了基本的折叠功能，但如果需要更复杂的交互逻辑（例如，点击一个<summary>时自动关闭其他所有<details>，或者在展开/折叠时触发动画等），仍然需要借助JavaScript来实现。
默认箭头样式： 尽管可以使用::marker伪元素进行自定义，但在不同浏览器中，默认箭头的渲染方式可能存在细微差异，自定义时可能需要一些跨浏览器兼容性处理。

总结

<details>和<summary>元素为前端开发者提供了一种强大且优雅的纯HTML/CSS解决方案，用于实现内容的折叠与展开。它们不仅简化了开发流程，减少了对JavaScript的依赖，还通过原生支持提升了页面的可访问性和语义化。在不需要复杂交互逻辑的场景下，优先考虑使用这两个元素，无疑是构建高效、简洁Web界面的明智选择。

以上就是纯HTML/CSS实现内容折叠与展开：details和summary元素的妙用的详细内容，更多请关注php中文网其它相关文章！