details和summary标签怎么用-html教程-PHP中文网

details和summary标签用于创建可折叠内容区域，summary显示标题，details包裹隐藏内容。2. 添加open属性可使details默认展开。3. 可通过CSS自定义样式，如隐藏默认箭头、添加背景和动画。4. JavaScript可监听toggle事件或控制open状态，实现动态交互。

details和summary标签怎么用

details

登录后复制

和

summary

登录后复制

标签在HTML里扮演着一个非常实用的角色，它们能让你轻松创建可折叠（或称“披露”）的内容区域。简单来说，

summary

登录后复制

定义了可见的标题或提示，而

details

登录后复制

则包裹着那些默认隐藏、点击

summary

登录后复制

后才会显示出来的具体内容。它们提供了一种原生、无需JavaScript就能实现的基本交互体验。

解决方案

details

登录后复制

和

summary

登录后复制

标签的用法其实非常直观。想象一下你在写一个FAQ（常见问题解答）页面，或者需要在一个页面上展示大量信息，但又不想让它一开始就显得过于冗长。这时候，这对组合就派上用场了。

基本的结构是这样的：你用

<details>

登录后复制

标签包裹整个可折叠区域，然后在

<details>

登录后复制

内部，紧接着放一个

<summary>

登录后复制

标签。

summary

登录后复制

标签里的内容就是用户在内容折叠时能看到的标题或提示文字。而所有在

<summary>

登录后复制

标签之后、

<details>

登录后复制

标签结束之前的内容，就是那些会被折叠起来、只有在用户点击

summary

登录后复制

后才会显示出来的详细信息。

举个例子：

<details>
  <summary>点我查看更多关于工作流程的细节</summary>
  <p>我们的工作流程通常从需求分析开始，接着是设计、开发、测试，最后上线部署。每个阶段都有明确的交付物和负责人。</p>
  <ul>
    <li>需求分析：收集用户反馈，明确功能边界。</li>
    <li>设计阶段：UI/UX设计，系统架构规划。</li>
    <li>开发阶段：编码实现，模块化开发。</li>
    <li>测试阶段：功能测试，性能测试，兼容性测试。</li>
    <li>上线部署：发布到生产环境，持续监控。</li>
  </ul>
</details>

<details open>
  <summary>这个部分默认是展开的</summary>
  <p>有时候，你可能希望某个折叠区域在页面加载时就是展开状态，比如最重要的那个FAQ答案。这时候，只需要给`details`标签添加一个`open`属性就可以了。</p>
</details>

登录后复制

当你把这段代码放到HTML文件里，你就会看到两个可点击的标题。点击第一个标题，它下面的段落和列表就会展开；再次点击，它们又会收起。第二个标题则会默认就是展开的状态。这种原生支持的交互，不仅提升了用户体验，也减少了对JavaScript的依赖，对于简单的内容展示来说，是个非常优雅的解决方案。

如何使用

details

登录后复制

和

summary

登录后复制

标签创建可折叠内容？

创建可折叠内容的核心在于理解

details

登录后复制

和

summary

登录后复制

的层级关系。

details

登录后复制

是父容器，它决定了整个可折叠区域的范围。而

summary

登录后复制

则是这个区域的“门面”，是用户与之交互的入口。没有

summary

登录后复制

，

details

登录后复制

虽然也能工作，但浏览器会提供一个默认的“详细信息”字样，这显然不如自定义的

summary

登录后复制

来得清晰和专业。

想象一下，你正在构建一个产品功能列表，每个功能都有一个简短的标题和一堆详细的说明、截图甚至代码示例。如果所有内容都平铺直叙，页面会变得非常长，用户很难快速找到自己感兴趣的部分。这时，你可以把每个功能的标题放在

summary

登录后复制

里，而所有的详细说明、图片、代码块等则放在

details

登录后复制

里，紧跟在

summary

登录后复制

之后。

<details>
  <summary><strong>功能一：智能任务分配</strong></summary>
  <div>
    <p>我们的系统可以根据团队成员的技能、负载和优先级，自动将新任务分配给最合适的成员。</p>
    <img src="task-allocation.png" alt="智能任务分配示意图" style="max-width:100%;">
    <pre><code>
      function assignTask(task, team) {
        // ... 复杂的分配逻辑
        return assignedMember;
      }
    </code></pre>
  </div>
</details>

<details>
  <summary><strong>功能二：实时进度追踪</strong></summary>
  <div>
    <p>团队成员可以实时更新任务状态，管理者通过仪表盘一目了然地掌握项目进展。</p>
    <ul>
      <li>任务创建：快速定义任务和截止日期。</li>
      <li>状态更新：拖拽式更新任务看板。</li>
      <li>报告生成：自动生成周报、月报。</li>
    </ul>
  </div>
</details>

登录后复制

这里，我特意在

summary

登录后复制

内部使用了

<strong>

登录后复制

标签，让标题更醒目。而在

details

登录后复制

内部，我放了一个

div

登录后复制

来包裹内容，这并不是强制的，但它能让你更容易地对这部分内容进行统一的CSS样式控制，比如设置内边距、背景色等。这种组合方式，让内容既丰富又整洁，用户可以按需展开，大大提升了信息获取的效率和体验。

details

登录后复制

标签的

open

登录后复制

属性有什么作用？如何控制其默认状态？

details

登录后复制

标签的

open

登录后复制

属性是一个布尔属性，它的作用非常直接：当这个属性存在时，

details

登录后复制

元素的内容在页面加载时就是展开的；如果不存在，内容则默认是折叠状态。这就像一个开关，控制着内容的初始可见性。

例如，在一个FAQ页面，你可能希望最常见的问题（或者你认为用户最应该首先看到的问题）在页面加载时就直接展示答案，而其他问题则保持折叠。这时，给那个特定的

<details>

登录后复制

标签加上

open

登录后复制

属性就完美解决了。

<details open>
  <summary>最常见问题：如何提交新的功能请求？</summary>
  <p>请通过我们的官方反馈渠道，在“功能请求”类别下提交您的想法。我们会定期审阅所有提交。</p>
</details>

<details>
  <summary>问题二：支持哪些支付方式？</summary>
  <p>我们支持支付宝、微信支付和主流信用卡支付。</p>
</details>

登录后复制

这里，第一个问题及其答案会直接显示出来，而第二个问题则需要用户点击才能看到答案。

从控制默认状态的角度来看，

open

登录后复制

属性是静态的，它只在页面首次加载时生效。如果你想在用户交互后（比如点击某个按钮）动态地改变

details

登录后复制

的展开/折叠状态，你就需要借助JavaScript了。例如，你可以通过JavaScript获取到

details

登录后复制

元素，然后直接修改它的

open

登录后复制

属性：

const myDetails = document.getElementById('myImportantDetails');

// 展开它
myDetails.open = true;

// 折叠它
myDetails.open = false;

登录后复制

这种结合，让

details

登录后复制

标签既拥有了原生的便捷性，又保留了通过脚本进行更复杂、动态控制的可能。不过，对于简单的默认状态设置，直接使用

open

登录后复制

属性是最简洁高效的方式。

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

如何通过CSS和JavaScript自定义

details

登录后复制

和

summary

登录后复制

的样式与行为？

虽然

details

登录后复制

和

summary

登录后复制

提供了原生的折叠功能，但默认的样式可能并不总是符合你的设计需求。好在，它们提供了很好的可定制性，你可以通过CSS来美化它们，并通过JavaScript来增强其行为。

CSS自定义样式：

summary

登录后复制

的样式： 你可以像对待任何其他元素一样，给

summary

登录后复制

添加背景色、内边距、字体样式等。一个常见的做法是改变鼠标指针样式，提示用户这是一个可点击的元素。

summary {
  background-color: #f0f0f0;
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  cursor: pointer; /* 鼠标悬停时显示手型指针 */
  font-weight: bold;
  list-style: none; /* 移除默认的箭头标记，后面会详细说 */
}

登录后复制

移除或自定义默认箭头： 浏览器通常会在

summary

登录后复制

旁边显示一个默认的箭头或三角形，表示其可折叠状态。如果你想用自己的图标，或者干脆移除它，需要针对不同的浏览器引擎进行处理：

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

summary::marker { /* 标准写法，现代浏览器支持 */
  display: none;
}

/* 如果你想用自己的箭头，可以这样： */
summary {
  position: relative;
  padding-left: 30px; /* 为自定义箭头留出空间 */
}

summary::before {
  content: '▶'; /* 默认显示右箭头 */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

details[open] summary::before {
  content: '▼'; /* 展开时显示下箭头 */
  transform: translateY(-50%) rotate(90deg); /* 也可以是旋转 */
}

登录后复制

```
details
```
登录后复制
内容区域的样式： 同样，你可以为
```
details
```
登录后复制
标签内的内容区域设置样式，比如内边距、边框、背景等，让它与
```
summary
```
登录后复制
区分开来。
```
details > div { /* 或者直接 details p, details ul 等 */
  padding: 15px;
  border: 1px solid #eee;
  border-top: none;
  background-color: #fff;
}
```
登录后复制
根据
```
open
```
登录后复制
状态切换样式： 你可以利用
```
details[open]
```
登录后复制
选择器来为展开状态下的
```
details
```
登录后复制
或
```
summary
```
登录后复制
添加不同的样式。
```
details[open] summary {
  background-color: #e8f0fe; /* 展开时背景色变化 */
  color: #3366cc;
}
```
登录后复制

JavaScript增强行为：

虽然

details

登录后复制

和

summary

登录后复制

本身不需要JavaScript就能工作，但JS可以让你实现更高级的交互，比如：

监听

toggle

登录后复制

事件：

details

登录后复制

元素会触发一个

toggle

登录后复制

事件，无论它是被打开还是关闭。你可以利用这个事件来执行一些额外的逻辑，比如记录用户行为、发送分析数据，或者在内容展开时加载一些动态数据。

const myDetails = document.querySelector('#myDetailsWithDynamicContent');

myDetails.addEventListener('toggle', (event) => {
  if (myDetails.open) {
    console.log('Details is now open!');
    // 可以在这里异步加载数据，或者执行动画
    // loadDynamicContent(myDetails);
  } else {
    console.log('Details is now closed!');
  }
});

登录后复制

程序化控制展开/折叠： 如前所述，你可以通过修改

details.open

登录后复制

属性来用JavaScript控制其状态。这在构建自定义的“全部展开/全部折叠”按钮时非常有用。

<button id="toggleAll">切换所有折叠项</button>
<details class="collapsible-item">...</details>
<details class="collapsible-item">...</details>
<details class="collapsible-item">...</details>

<script>
  document.getElementById('toggleAll').addEventListener('click', () => {
    const allDetails = document.querySelectorAll('.collapsible-item');
    let allOpen = true; // 假设所有都是打开的

    // 检查是否有任何一个处于关闭状态
    allDetails.forEach(detail => {
      if (!detail.open) {
        allOpen = false;
      }
    });

    // 如果所有都是打开的，则全部关闭；否则全部打开
    allDetails.forEach(detail => {
      detail.open = !allOpen;
    });
  });
</script>

登录后复制

通过CSS和JavaScript的结合，