HTML折叠标签详解：details和summary用法

一个简单的例子就像这样：

  
点击这里查看更多信息
  
这是一段被折叠起来的内容。它可能是更详细的说明，一个常见问题的答案，或者任何你不想一开始就展示给用户的信息。
  

    
项目一
    
项目二
    
项目三
  



  
这段内容默认是展开的
  
因为我在 details 标签上加了 'open' 属性。

这种原生支持的折叠功能，在语义化和可访问性方面表现得非常出色，浏览器会处理好基本的交互和焦点管理。

details和summary标签在哪些场景下特别有用？

在我看来，details 和 summary 标签在很多日常的网页设计场景中，简直是“小而美”的解决方案。最典型的就是 FAQ（常见问题解答） 页面。想象一下，一个长长的 FAQ 列表，如果所有答案都直接铺开，页面会显得非常冗长。但如果每个问题都用 details 和 summary 包裹起来，用户只需要点击自己关心的问题，答案才会展开，大大提升了阅读体验。

除了 FAQ，它们也很适合用于：

• 显示/隐藏补充信息： 比如一个产品的规格列表，或者一篇文章的引用来源。不是所有用户都需要立即看到这些，但有需要时又能方便地找到。
• 简单的折叠面板或手风琴效果： 如果你不需要复杂的动画或联动效果，只是想让几个内容块能独立展开收起，它们非常合适。
• 法律条款或隐私政策的摘要： 那些冗长、枯燥的文本，可以先展示一个简短的摘要在 summary 里，完整的详细内容则放在 details 里，让用户选择性阅读。
• 代码片段或技术细节的展示： 当文章中包含一些不希望干扰主阅读流，但又提供给感兴趣读者查看的代码或技术细节时。

它们的好处在于，原生支持意味着更好的性能和无障碍性。浏览器知道这是一个可折叠的组件，屏幕阅读器也能正确地识别和播报其状态（展开或收起），键盘用户也能通过空格键或回车键进行操作，这比你自己从零开始用 JavaScript 和 ARIA 属性构建一个要省心得多。当然，对于特别复杂的交互，比如要求一次只能展开一个面板的手风琴，或者需要高度自定义动画的场景，可能还是需要 JavaScript 的介入，但对于基础需求，它们已经绰绰有余了。

如何用CSS和JavaScript增强details和summary的交互体验？

虽然 details 和 summary 提供了开箱即用的折叠功能，但默认的样式可能略显朴素，而且交互上也有提升空间。通过 CSS 和一点点 JavaScript，我们能让它们看起来更专业，用起来更顺手。

CSS 增强：

最常见的需求就是改变那个默认的三角形图标，或者给 summary 加上一些视觉提示，比如鼠标悬停时的样式。

1. 自定义默认箭头： 那个小小的三角形其实是 ::marker 伪元素。你可以通过 summary::marker 来控制它的样式，比如隐藏它，然后用 ::before 或 ::after 伪元素来替换成自定义的图标（例如一个加号/减号）。

   details {
     margin-bottom: 10px;
     border: 1px solid #eee;
     border-radius: 4px;
   }
   
   summary {
     padding: 10px 15px;
     background-color: #f7f7f7;
     border-bottom: 1px solid #eee;
     cursor: pointer;
     font-weight: bold;
     list-style: none; /* 移除默认的列表标记 */
     position: relative;
   }
   
   /* 隐藏默认的箭头 */
   summary::-webkit-details-marker,
   summary::marker {
     display: none;
   }
   
   /* 添加自定义的加号/减号图标 */
   summary::before {
     content: '+'; /* 默认是加号 */
     position: absolute;
     right: 15px;
     font-size: 1.2em;
     line-height: 1;
     transition: transform 0.2s ease;
   }
   
   details[open] summary::before {
     content: '-'; /* 展开时变成减号 */
     transform: rotate(0deg); /* 确保减号不旋转 */
   }
   
   details[open] summary {
     border-bottom: none; /* 展开时底部边框可以去掉 */
   }
   
   details p {
     padding: 10px 15px;
     line-height: 1.6;
   }

   通过这种方式，我们可以完全控制图标的样式和位置。

2. 过渡效果： 遗憾的是，details 内部内容的高度变化，浏览器原生不支持平滑的 CSS transition。这是个常见的痛点。当你点击 summary 时，内容会立即展开或收起，没有动画效果。要实现平滑的展开/收起动画，通常需要 JavaScript 的介入。

JavaScript 增强：

JavaScript 的介入主要用于实现更复杂的交互逻辑或动画。

1. 监听 toggle 事件： details 元素有一个 toggle 事件，当其状态从展开变为收起，或从收起变为展开时触发。这是我们执行额外逻辑的好时机。

   document.querySelectorAll('details').forEach(detail => {
     detail.addEventListener('toggle', event => {
       if (detail.open) {
         console.log('Details 已展开');
         // 可以在这里加载动态内容，或者发送分析事件
       } else {
         console.log('Details 已收起');
       }
     });
   });

2. 实现自定义动画： 由于原生 CSS 无法直接平滑过渡高度，我们可以通过 JS 来模拟。这通常涉及在 toggle 事件中获取内容的高度，然后通过 max-height 或 height 属性配合 CSS transition 来实现。这比纯 CSS 复杂得多，但能带来更好的用户体验。

   // 这是一个简化版的动画思路，实际生产环境可能需要更健壮的实现
   document.querySelectorAll('details').forEach(detail => {
     const content = detail.querySelector('p'); // 假设内容在 p 标签里
     if (!content) return; // 确保有内容
   
     // 初始设置，隐藏溢出并设置高度为0
     content.style.overflow = 'hidden';
     content.style.transition = 'max-height 0.3s ease-out';
   
     detail.addEventListener('toggle', () => {
       if (detail.open) {
         // 展开时，先获取实际高度，然后设置 max-height
         content.style.maxHeight = content.scrollHeight + 'px';
       } else {
         // 收起时，先设置当前高度，然后动画到0
         content.style.maxHeight = content.scrollHeight + 'px'; // 确保从当前高度开始
         requestAnimationFrame(() => {
           content.style.maxHeight = '0';
         });
       }
     });
   
     // 动画结束后清除 max-height，防止内容被截断
     content.addEventListener('transitionend', () => {
       if (detail.open) {
         content.style.maxHeight = 'none'; // 动画结束后恢复，防止内容被截断
       }
     });
   });

   这段JS代码只是一个思路，实际实现动画需要考虑更多细节，比如确保内容在动画结束后能够完全显示，以及处理好快速点击的情况。

3. 手风琴效果（一次只展开一个）： 如果你想实现点击一个 summary 时，其他已展开的 details 自动收起，就需要 JavaScript 来控制 open 属性。

   document.querySelectorAll('details').forEach(currentDetail => {
     currentDetail.addEventListener('toggle', () => {
       if (currentDetail.open) {
         document.querySelectorAll('details').forEach(otherDetail => {
           if (otherDetail !== currentDetail && otherDetail.open) {
             otherDetail.open = false; // 关闭其他已展开的 details
           }
         });
       }
     });
   });

通过这些 CSS 和 JavaScript 的配合，details 和 summary 就能从一个基础组件，蜕变为一个功能更强大、视觉效果更佳的交互元素。

使用details和summary标签时有哪些需要注意的细节和潜在问题？

使用 details 和 summary 标签，虽然方便，但也有一些需要留心的地方，避免踩坑。

1. 浏览器兼容性： 尽管现代浏览器对 details 和 summary 的支持已经非常普遍和良好（IE 浏览器是其主要短板，但现在使用率已大幅下降），但如果你需要支持一些老旧的浏览器版本，可能需要考虑使用 polyfill 或者提供一个基于 JavaScript 的回退方案。检查 caniuse.com 是个好习惯，它能告诉你这些标签在不同浏览器上的具体支持情况。

2. SEO 影响： 这是一个大家比较关心的问题。好消息是，搜索引擎（比如 Google）会抓取并索引 details 标签内部的所有内容，即使它们默认是折叠状态。这意味着你放在 details 里的内容不会被搜索引擎“忽略”，这对于 SEO 来说是个积极的信号。所以，不用担心把重要信息放在里面会导致排名下降。

3. 无障碍性（Accessibility）的细微之处： details 和 summary 在原生层面提供了很好的无障碍支持，包括键盘导航（通过 Tab 键聚焦到 summary，然后按空格或回车键切换状态）和屏幕阅读器支持。但是，如果你通过 CSS 完全改变了 summary 的默认行为或移除了 ::marker 伪元素，并且没有用 ::before / ::after 伪元素或者其他方式来提供视觉提示，那么对于视力受损的用户来说，可能会失去一些上下文。确保你的自定义样式不会破坏原生的无障碍语义。例如，确保用户依然能清楚地知道这是一个可点击的、可展开/收起的区域。

4. 动画的限制： 前面也提到了，details 元素内容的展开/收起默认是没有平滑动画的，内容会瞬间出现或消失。这是因为 height 从 0 到 auto 的过渡很难被浏览器平滑渲染。要实现平滑的展开/收起动画，通常需要 JavaScript 来动态计算内容高度，并配合 CSS 的 max-height 或 height 属性进行过渡。这会增加一些开发的复杂性。

5. 嵌套使用： details 标签是可以嵌套的，也就是说，你可以在一个 details 里面再放另一个 details。这在某些层级结构比较复杂的信息展示中可能会用到。不过，过多的嵌套可能会让用户感到困惑，所以在使用时要考虑信息架构的清晰度。

6. summary 必须是 details 的第一个子元素： 这是 HTML 规范的要求。如果你把其他元素放在 summary 前面，或者 summary 不作为 details 的直接子元素，那么 details 的折叠功能可能不会按预期工作，或者在某些浏览器中表现异常。

总的来说，details 和 summary 是非常实用的 HTML 元素，尤其适合那些对交互动画要求不高，但又希望提供良好用户体验和无障碍性的场景。了解它们的特性和局限，能帮助我们更好地利用它们。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~