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

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

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

details和summary元素简介

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

这两个元素协同工作，为我们提供了一个开箱即用的内容折叠功能，无需编写任何JavaScript代码。当

基本用法示例

使用

    
    
    
    



    

        
纯HTML内容折叠示例

        

            
点击此处查看更多信息
            
这里是折叠起来的详细内容。它可以包含段落、列表、图片、表格等任何HTML元素。
            

                
这是一个列表项。
                
另一个重要的信息。
                
最后一条提示。
            
            
当您点击上方的标题时，这些内容会显示或隐藏。
        

        

            
默认展开的区域
            
这个`
`元素默认是展开的，因为它带了`open`属性。

            @@##@@
        

        

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

在上面的代码中，我们创建了三个可折叠区域。第一个和第三个默认是折叠的，第二个通过添加open属性使其默认展开。用户只需点击

Facet

Facet.ai是一款AI图像生成和编辑工具，具备实时图像生成和编辑功能

下载

通过CSS进行样式定制

虽然

1. 基本样式调整：

您可以像对待其他HTML元素一样，为

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::-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] {
    background-color: #f9f9f9;
    border-color: #c0c0c0;
}

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

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

优势与应用场景

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

这些特性使得

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

注意事项

• 浏览器兼容性： 现代浏览器（Chrome, Firefox, Safari, Edge）对
  和

  的支持良好。但需要注意的是，Internet Explorer（IE）系列浏览器不支持这两个元素。如果您的目标用户群体中包含大量IE用户，则可能需要考虑使用JavaScript回退方案或选择其他实现方式。
• 复杂交互： 虽然它们提供了基本的折叠功能，但如果需要更复杂的交互逻辑（例如，点击一个
  时自动关闭其他所有

  ，或者在展开/折叠时触发动画等），仍然需要借助JavaScript来实现。
• 默认箭头样式： 尽管可以使用::marker伪元素进行自定义，但在不同浏览器中，默认箭头的渲染方式可能存在细微差异，自定义时可能需要一些跨浏览器兼容性处理。

总结