details标签应用举例
<style>.artBox { font-size: 20px; margin: 30px auto; max-width: 1200px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #333; }
.artBox > p { margin: 15px 0; line-height: 1.8; text-align: justify; }
.artBox code { background: #eee; padding: 2px 6px; border-radius: 3px; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.95em; }
.artBox details { margin: 20px; padding: 6px; border-radius: 8px; box-shadow: 0 0 4px gray; position: relative; }
.artBox summary { padding: 4px 8px; background: #eee; cursor: pointer; }
.txtRed { color: red; }
</style>
<div class="artBox">
<p><code><details></code> 是 HTML5 引入的交互式标签，通常与 <code><summary></code> 配合使用，后者以其子元素出现，起概括、归纳作用，同级子元素如 <code><div></code> 或 <code><p></code> 等则为折叠起来的详细内容，点击了 summary 元素它们会展开。演示如下：</p>
<details>
<summary>了解 details 标签</summary>
<p>HTML <details> 元素可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。展现组件通常在屏幕上使用一个小三角形，旋转（或扭转）以表示打开/关闭的状态，三角形旁边有一个标签。<summary> 元素的内容被用来作为展示小部件的标签。</p>
<p>【注】英文 details 意为“细节”，summary 意思是“概要”。</p>
</details>
<p>演示例子的代码结构如下：</p>
<details open>
<summary>details标签代码举例</summary>
<pre><details <span class="txtRed">open</span>>
<summary>概要</summary>
<div>
详细内容……
（除了 div 元素，还可以使用其他各类常规标签来组织详细内容）
</div>
</details></pre>
</details>
<p>代码演示是自动展开的，因为我在 details 元素的HTML代码中使用了 <code>opne</code> 属性，该属性用于展开 details 元素折叠起来的所有内容。事实上，details 元素就是通过 <code>open</code> 属性来操作标签具体内容的折叠与展开，一切都已经封装好，无需通过 JS 对之进行交互管理。这不意味着对 details 元素的相关管理是多余的，相反，JS 同样对之大有作为，例如本文的 summary 元素的标题提示语就是由 JS 动态实现的，看代码：</p>
<details>
<summary>JS动态管理summary的title属性</summary>
<pre>const detailsElms = document.querySelectorAll('.artBox details');
detailsElms.forEach(details => {
const summary = details.querySelector('summary');
summary.title = '点击展开';
details.addEventListener('toggle', () => {
summary.title = details.open ? '点击收回' : '点击展开';
});
}); </pre>
</details>
<p>这里，监听 .artBox 标签下所有 details 元素的 <code>toggle</code> 事件，当其 <code>open</code> 属性触发，summary 元素的 title 属性值为“点击收回”，否则为“点击展开”。title 属性值的动态管理意在提升交互友好性，尽管 details 元素自身的三角形指示按钮已具备足够的信息量。JS 针对 details 元素能做的不止这些，这需要在实际应用中根据实际需求而定。</p>
<p>另外，可以为 details 元素及其子元素设置相应的 CSS 样式，如果有必要的话。本文的 details 标签和其元素 summary 标签都做了简单的 CSS 设置：</p>
<details>
<summary>details和summary的CSS设置</summary>
<pre>.artBox details {
margin: 20px;
padding: 6px;
border-radius: 8px;
box-shadow: 0 0 4px gray;
position: relative;
}
.artBox summary {
padding: 4px 8px;
background: #eee;
cursor: pointer;
}</pre>
</details>
<p>对 details 标签下的其他标签，同样也可以做相应的CSS设置。</p>
</div>
<script>
const detailsElms = document.querySelectorAll('.artBox details');
detailsElms.forEach(details => {
const summary = details.querySelector('summary');
summary.title = '点击展开';
details.addEventListener('toggle', () => {
summary.title = details.open ? '点击收回' : '点击展开';
});
});
</script> details 元素之前有使用过，但可能没有做过专门介绍 之前老师使用过details 标签
感谢这次又做了专门介绍
尤其是由 JS 动态实现的summary 元素的提示语 马黑黑 发表于 2026-2-6 14:10
details 元素之前有使用过，但可能没有做过专门介绍
只是这种 展开 与 收回，若不注意提示语 还真不知道呢{:4_172:} 虽然道理我看的糊里糊涂，可能我的收获让我自己满意。我知道这个东东的作用，就让我很高兴了。
谢谢马老师分享，晚上好！{:4_204:}{:4_190:}
{:4_176:} 樵歌 发表于 2026-2-6 18:51
{:4_191:} 霜染枫丹 发表于 2026-2-6 18:24
虽然道理我看的糊里糊涂，可能我的收获让我自己满意。我知道这个东东的作用，就让我很高兴了。
谢谢马老 ...
{:4_190:} 杨帆 发表于 2026-2-6 16:10
之前老师使用过details 标签
感谢这次又做了专门介绍
{:4_191:} 杨帆 发表于 2026-2-6 16:13
只是这种 展开 与 收回，若不注意提示语 还真不知道呢
小三角形指示按钮还是很明显的 马黑黑 发表于 2026-2-6 18:52
小三角形指示按钮还是很明显的
是的，但容易把它当作装饰符号{:4_173:} 杨帆 发表于 2026-2-6 19:16
是的，但容易把它当作装饰符号
这是对细节的关注问题 马黑黑 发表于 2026-2-6 19:58
这是对细节的关注问题
是，太细的细节容易忽略节的意义{:4_173:} 杨帆 发表于 2026-2-6 20:04
是，太细的细节容易忽略节的意义
现在的人貌似都不太注重细节 我自己写不出来代码，这个说明对我有很大的意义在于我在检索错误的时候知道了应该是什么样子的状态，很有用。
今生我注定在代码这个类别是它山之石可以攻玉了，多一个知识点就多了一份便利，谢谢马老师分享。
https://www.yueyijyw.com/forum.php?mod=viewthread&tid=1333{:4_190:}{:4_190:}
这个交互式标签很有意思，记得以前使用 details 是藏起一张小图？ 红影 发表于 2026-2-7 08:39
这个交互式标签很有意思，记得以前使用 details 是藏起一张小图？
藏啥都行 矮油这个展开后里面有许多宝呗 花飞飞 发表于 2026-2-8 22:05
矮油这个展开后里面有许多宝呗
捡到宝一样
页:
[1]