快速提醒：details/summary 是有史以来制作手风琴的最简单方法

天啊，感谢 <details> 元素。将一些内容放到里面，你就可以得到一个可访问的展开以获取更多交互，几乎不需要任何工作。

在里面放一个 <summary> 来定制扩展文本的内容。

非常适合常见问题解答。

你真的可以无限地对它们进行样式化。如果你不喜欢默认的焦点环，你可以删除它，但要确保放回一些样式。

这里我使用了一个标题元素来表示每个可扩展部分，它有一个焦点状态，模仿了页面上其他交互式元素。

唯一不支持此功能的浏览器是微软的浏览器（以及 Opera Mini，这是有道理的——它实际上并不进行交互）。

此浏览器支持数据来自 Caniuse，它提供了更多详细信息。数字表示该浏览器从该版本开始支持该功能。

桌面

Chrome	Firefox	IE	Edge	Safari
12	49	否	79	6

移动设备/平板电脑

Android Chrome	Android Firefox	Android	iOS Safari
127	127	4	6.0-6.1

但即使如此，它就像所有部分都打开了，所以这不是什么大问题

想要对默认三角形进行样式化？说来奇怪，标准做法是通过列表样式属性进行操作。但基于 Blink 的浏览器还没有赶上，因此它们有自己的专有方法。不过，它们可以结合起来。以下是用图片替换它的示例

summary {
  list-style-image: url(right-arrow.svg);
}

summary::-webkit-details-marker {
  background: url(right-arrow.svg);
  color: transparent;
}

不幸的是，它们不会旋转，而且也没有办法对默认三角形进行动画处理。一个想法可能是将目标定位到 :focus 状态并交换背景

但这似乎仅限于 WebKit 和 Blink，即使如此，一旦项目失去焦点，箭头也会返回，即使项目仍然展开。

可访问性

要知道 <summary> 元素会清除它内部任何其他元素的语义，因此不要认为你可以在里面放一个 <h3> 或其他东西，屏幕阅读器会识别出来，因为它们不会。 Dave 有更多详细信息。
Adrian 还有一篇文章关于 details/summary 可能不是各种交互模式的良好替代品。

Michael J Whyte

# 2018 年 3 月 28 日

看起来 Microsoft Edge 团队正在努力实现“details”标签。希望我们会在下一个版本中看到它。如果你想加点压力，你可以在此处投票支持这个功能请求

https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6261266-details-summary-elements

Edge 团队似乎积极开发高票功能请求。

Jack Nycz

评论永久链接# 2018 年 3 月 29 日

他们从 2017 年 5 月就开始着手开发了…… 不确定这到底有多积极地进行开发，很遗憾。

somascope

# 2018 年 3 月 28 日

很遗憾 MS 没有支持这些元素。我发现在 IE11 中，它们显示为内联元素。因此，即使它们在 IE11 中将被“展开”（我想这对渐进增强来说是一种胜利，对吧？），它们也会被挤在一起成为一个笨拙的段落块。在 CSS 中向 details 和 summary 元素添加 display: block 会使东西看起来符合预期；像好的小块那样堆叠在一起。

JaKhris

# 2018 年 3 月 28 日

很高兴知道！至于 :focus 技巧，你可以使用类似 details[open] > summary 的东西来更改箭头在展开时的外观。

Thomas Higginbotham

# 2018 年 3 月 28 日

与其使用 :focus 来确定是否旋转箭头，你可以使用“open”属性。我在 Chrome、Firefox 和 Safari 中进行了测试，它们似乎都支持它。

这是你笔的更新版本：https://codepen.io/thomashigginbotham/pen/aYqvqQ?editors=1100

Flo Edelmann

# 2018 年 3 月 28 日

一种方法是在 summary 的 ::before 伪元素中为默认状态和 [open] 状态完全重新创建箭头。然后，只需在它们之间添加一个过渡，禁用浏览器的默认样式，就完成了。

Chris Fryant

# 2018 年 3 月 28 日

我还没有在其他浏览器中测试过，但在 Chrome 和 Firefox 中，使用 open 属性选择器，箭头在这支笔中按预期工作：https://codepen.io/cfryant/pen/dmdXJE

John Kemp-Cruz

# 2018 年 3 月 28 日

你可以使用 open 属性而不是 focus
details[open] summary{
list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/down-arrow.svg);
}

我也更喜欢使用 transform: rotate(90deg);（如果可能的话），而不是加载新图片。

AmeliaBR

# 2018 年 3 月 28 日

我对 details & summary 有着爱恨交织的感情。

是的，拥有一个原生可访问的小部件来处理这种常见行为很棒。

但是:

你无法真正用 CSS 模型描述它的基本行为。显示/隐藏的部分不在任何特定元素中。
这意味着无法实现一个媒体查询覆盖，说如果屏幕足够大，就始终显示它。因此，它不会替换你所有的显示/隐藏导航小部件。
由于 open/closed 是通过一个简单的属性完成的，并且没有伪类，如果你想 (a) 让一些元素一开始就打开，(b) 更改打开和关闭的样式，你可能需要一些脚本支持测试，这样你的 details[open] 选择器就不会匹配不支持的浏览器。
另外，Chrome 和 Webkit 目前不允许你对小箭头小部件进行样式化。在 Firefox 中，它是一个列表标记，这也是规范现在所说的，所以它应该会变得更好。

Bryan Maamo (@nin_bryan)

# 2018 年 3 月 28 日

这是关于箭头切换的另一个想法

details[open] > summary {
  list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/down-arrow.svg);
}
details[open] > summary::-webkit-details-marker {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/right-arrow.svg);
  color: transparent;
}

Bryan Maamo (@nin_bryan)

评论永久链接# 2018 年 3 月 28 日

Šime Vidas

# 2018 年 3 月 28 日

关于最后一部分，你可以通过 [open] 选择器对打开的 <details> 元素进行样式化

Ashiq

# 2018 年 3 月 28 日

这真的很酷，IE 不支持它真是太可惜了。

Anselm Hannemann

# 2018 年 3 月 28 日

谢谢。虽然这确实是构建可折叠组件的简单方法，但在 Safari 中存在一个 bug，如果你将 <details> 和 <summary> 元素与 rem 值一起用于设置 font-size，它会导致严重的网站渲染问题。有关该问题的更多信息，请参阅 https://bugs.webkit.org/show_bug.cgi?id=173876。

Mikey

# 2018 年 3 月 28 日

为了让自定义箭头旋转和动画，以下方法至少在 Chrome 中似乎有效

summary::-webkit-details-marker {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/right-arrow.svg);
  color: transparent;
  transition-property: transform;
  transition-duration: .5s;
}
details[open] summary::-webkit-details-marker {
  transform: rotateZ(90deg);
}

Tejasvi

# 2018 年 3 月 29 日

details 有一个很小的问题。到目前为止，我还没有能够在点击 summary 时对 details 元素的高度进行动画/过渡。即使谷歌搜索过了。我还没有找到任何解决这个问题的干净方法。权贵人士只想做动画。语义见鬼去吧。

basher

# 2018 年 3 月 29 日

Chris，我认为这些元素仍然存在可访问性问题？

当然，它们可以获得键盘焦点，但即使 W3C 也建议使用不同的标记模式 + ARIA 来实现屏幕阅读器的可访问性——请参阅 https://www.w3.org/TR/wai-aria-practices-1.1/#accordion

James Long

# 2018 年 3 月 29 日

你无法对默认三角形进行动画处理，但你可以对伪元素进行动画处理
https://jsfiddle.net/Skateside/kfmvdh7k/

Frank M Palinkas

# 2018 年 3 月 29 日

这是我找到的一个针对 IE/Edge 的 polyfill

按预期工作。

Kirk Franklin

# 2018 年 3 月 29 日

HTML5 Doctor 有一个示例和解释，说明如何使用 :after 伪元素替换箭头。

Herr Ginsterbusch

# 2018 年 3 月 30 日

强烈地让我想起了定义列表 (dl, dd + dt)。所以对我来说，样式与列表相关的道理完全说得通 :)

cu, w0lf。

Adrian

# 2018 年 3 月 31 日

w3c: 我们需要一些伪选择器。

:open {}
:closed {}

Alex

# 2018 年 4 月 4 日

与复选框 hack 相比，此功能有哪些优势？复选框与更广泛的浏览器兼容，在键盘控制时具有定义良好的行为，并支持大量伪选择器。复选框可以独立于其标签放置在不同的布局容器中，以创建复杂的控件。您甚至可以将它们与表单结合使用，以创建完全无 JavaScript 的逻辑，该逻辑基于控件的当前状态。相比之下，此功能不够灵活，需要 JavaScript 才能进行非平凡的使用。

Geoff Graham

评论永久链接# 2018 年 4 月 5 日

优点是易于使用。看看它与其他方法相比需要多少标记！

这确实是文章的重点：它是迄今为止最简单的（即不需要任何 hack）方法，但它仍然需要走上一段路，才能成为迄今为止最可采用的方法。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。