details和summary标签怎么用？折叠内容如何实现？-html教程-PHP中文网

使用 <details> 和 <summary> 标签可原生实现内容折叠与展开，无需javascript；2. <summary> 为标题且必须是 <details> 的第一个子元素，默认折叠，添加 open 属性可默认展开；3. 可通过css隐藏默认标记并自定义指示符样式，如用 ::before 实现加号/减号切换；4. 原生支持键盘导航与屏幕阅读器，具备良好无障碍性，但自定义时需确保视觉提示清晰；5. 可通过javascript监听 toggle 事件实现动画、异步加载、状态记忆及手风琴效果，提升交互体验。

details和summary标签怎么用？折叠内容如何实现？

用

<details>

登录后复制

和

<summary>

登录后复制

标签就能轻松实现网页内容的折叠与展开。简单来说，

<details>

登录后复制

是一个容器，用来包裹所有你想隐藏或显示的内容；而

<summary>

登录后复制

则是这个容器的“标题”，用户点击它就能控制容器内其他内容的显示隐藏。这是HTML5原生提供的一个非常方便的功能，省去了我们写JavaScript的麻烦。

解决方案

说起来，这俩标签真是HTML5里一个挺实用的“小发明”。我第一次看到它，就觉得，哎，这不就是我们以前用JavaScript吭哧吭哧写出来的那个折叠效果嘛，现在直接原生支持了，省心多了。

具体怎么用呢？你把需要折叠的内容，比如一大段文字、一个图片列表，甚至是一个表单，都放进

<details>

登录后复制

标签里。而那个你希望用户点击来触发折叠的标题，就放到

<summary>

登录后复制

标签里，这个

<summary>

登录后复制

标签必须是

<details>

登录后复制

的第一个子元素。

举个例子，假设你想把一个常见问题解答（FAQ）的答案隐藏起来，只显示问题，用户点击问题才显示答案：

<details>
  <summary>这是第一个问题：如何开始使用这个功能？</summary>
  <p>答案在这里：您只需要点击页面上的“注册”按钮，然后按照提示填写信息即可。</p>
  <ul>
    <li>步骤一：注册账号</li>
    <li>步骤二：登录系统</li>
    <li>步骤三：开始探索</li>
  </ul>
</details>

<details>
  <summary>第二个问题：支持哪些支付方式？</summary>
  <p>我们目前支持微信支付、支付宝和银行卡转账。</p>
</details>

登录后复制

是不是很简单？默认情况下，

<details>

登录后复制

里面的内容是折叠的，只显示

<summary>

登录后复制

。如果你想让它默认就是展开的，可以给

<details>

登录后复制

标签加一个

open

登录后复制

属性：

<details open>
  <summary>这个部分默认是展开的哦</summary>
  <p>因为我加了'open'属性。</p>
</details>

登录后复制

就这么简单，没有复杂的CSS，也没有一行JavaScript。这对于那些需要快速实现交互，又不想引入太多JS的场景来说，简直是福音。当然，如果你需要更复杂的动画或者状态控制，JS还是少不了的，但这俩标签提供了一个非常好的起点。

如何自定义

<details>

登录后复制

和

<summary>

登录后复制

标签的样式？

虽然原生

<details>

登录后复制

和

<summary>

登录后复制

已经很方便了，但它默认的样式可能有点朴素，甚至在不同浏览器里长得还不太一样。比如那个小箭头，有的浏览器是三角形，有的是小加号。如果你对UI有要求，那肯定得自己动手美化一下。

自定义样式主要围绕这两个标签本身以及它们内部的元素。最常见的需求就是改变那个默认的展开/折叠指示符。这个指示符其实是由

summary

登录后复制

元素的

::marker

登录后复制

伪元素控制的。

你可以这样把它干掉：

summary::-webkit-details-marker {
  display: none; /* 针对WebKit内核浏览器，如Chrome, Safari */
}

summary::marker {
  display: none; /* 标准写法，针对Firefox等 */
}

登录后复制

把默认的marker去掉后，你就可以用CSS的

::before

登录后复制

或

::after

登录后复制

伪元素来创建自己的指示符了，比如一个加号和减号：

summary {
  list-style: none; /* 移除默认列表样式，某些浏览器可能需要 */
  cursor: pointer; /* 提示用户可点击 */
  position: relative;
  padding-left: 20px; /* 为自定义指示符留出空间 */
}

summary::before {
  content: '+'; /* 默认显示加号 */
  position: absolute;
  left: 0;
  font-weight: bold;
  transition: transform 0.2s ease;
}

details[open] summary::before {
  content: '-'; /* 展开时显示减号 */
  transform: rotate(0deg); /* 确保形状不变，只是内容变了 */
}

/* 还可以给summary添加hover效果，或者改变文字颜色等等 */
summary:hover {
  color: #007bff;
}

登录后复制

当然，你也可以直接给

<details>

登录后复制

和

<summary>

登录后复制

添加背景色、边框、内边距等等，就像对待其他HTML元素一样。记住，

<summary>

登录后复制

是块级元素，可以设置宽度、高度、内外边距等。有时候，为了确保布局不乱，给

<details>

登录后复制

加个

display: block;

登录后复制

或者

width: 100%;

登录后复制

也是个好习惯。我个人就遇到过一些奇怪的布局问题，最后发现是默认的display属性在捣鬼。

使用

<details>

登录后复制

和

<summary>

登录后复制

标签时需要注意哪些无障碍性问题？

无障碍性（Accessibility）在网页设计中是个挺重要的考量，尤其对于折叠内容这种交互元素。好在

<details>

登录后复制

和

<summary>

登录后复制

标签在原生层面就提供了不错的无障碍支持。

标小兔AI写标书

一款专业的标书AI代写平台，提供专业AI标书代写服务，安全、稳定、速度快，可满足各类招投标需求，标小兔，写标书，快如兔。

查看详情

首先，它们自带了键盘导航功能。用户可以通过Tab键聚焦到

<summary>

登录后复制

上，然后按Enter键或空格键就能展开/折叠内容。这对于不方便使用鼠标的用户来说，是个非常友好的特性。

其次，屏幕阅读器也能很好地识别这两个标签。当焦点在

<summary>

登录后复制

上时，屏幕阅读器会告诉用户这是一个可点击的“摘要”或“标题”，并且会告知其当前的展开/折叠状态（比如“已折叠”或“已展开”）。这是因为浏览器会自动为它们添加

role="group"

登录后复制

和

aria-expanded

登录后复制

等ARIA属性。

不过，如果你自定义了指示符（比如上面说的用

::before

登录后复制

伪元素），或者用JavaScript控制了展开/折叠，那么就得格外小心了。

如果你移除了原生的

::marker

登录后复制

，确保你自定义的指示符视觉上足够清晰，能明确告诉用户这是个可点击的元素，并且能反映出当前的状态。虽然屏幕阅读器依然能读出状态，但视觉上的提示对所有用户都很重要。

更深一层，如果你的折叠内容里面有复杂的交互元素，比如表单字段、按钮，确保这些元素在折叠状态下不会被无意中聚焦到。通常情况下，浏览器会处理好这一点，但如果通过JS动态插入或移除内容，就要检查一下

tabindex

登录后复制

和

aria-hidden

登录后复制

属性是否正确设置了。

我通常会建议，如果只是简单的FAQ或者内容隐藏，直接用原生

<details>

登录后复制

和

<summary>

登录后复制

就好，无障碍性方面省心。但如果涉及复杂的动态内容加载或者状态管理，JavaScript的介入就需要我们手动去维护好ARIA属性，确保屏幕阅读器能正确理解页面的状态变化。

如何结合JavaScript增强

<details>

登录后复制

和

<summary>

登录后复制

标签的功能？

虽然

<details>

登录后复制

和

<summary>

登录后复制

原生功能很强大，但总有些时候，我们希望它能做更多，比如：

在内容展开时播放一个动画。
在内容展开时异步加载数据。
记录用户的展开偏好，下次访问时保持状态。
实现“手风琴”效果（Accordion），即展开一个，其他自动折叠。

这时候，JavaScript就派上用场了。

<details>

登录后复制

标签有一个

toggle

登录后复制

事件，当内容展开或折叠时都会触发。我们可以监听这个事件来执行自定义逻辑。

const detailsElements = document.querySelectorAll('details');

detailsElements.forEach(details => {
  details.addEventListener('toggle', () => {
    if (details.open) {
      // 内容展开了
      console.log('内容已展开:', details.querySelector('summary').textContent);
      // 可以在这里添加展开动画类，或者加载数据
      // details.classList.add('is-open');
      // loadContent(details); // 假设有个函数用来加载内容
    } else {
      // 内容折叠了
      console.log('内容已折叠:', details.querySelector('summary').textContent);
      // details.classList.remove('is-open');
    }
  });
});

登录后复制

实现手风琴效果也是一个常见需求。基本思路是，当一个

<details>

登录后复制

被打开时，遍历所有其他的

<details>

登录后复制

，如果它们是打开状态，就把它关闭。

const detailsGroups = document.querySelectorAll('.accordion-group details'); // 假设你的手风琴都在一个特定类名下

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

登录后复制

这个手风琴的实现方式，我个人觉得比以前用jQuery或者纯JS写一大堆