认识<细节>

我想谈谈精彩的<details>元素，并展示其使用示例，从简单到疯狂。

您熟悉可以将其状态从可见更改为隐藏的组件的布局模型：

 .component { display:none; } .component.open { display:block; } 

 toggleButton.onclick = () => component.classList.toggle('open') 

现在算了。 开箱即用的物品可以做到这一点。 见面- <details>

HTML <details>元素用于显示隐藏的（其他）信息。

基本应用

首先，让我们看看这个元素是如何工作的：

请注意，该示例无需任何其他样式或JavaScript即可工作。 所有功能都内置在浏览器本身中。

默认情况下，可见文本取决于您系统的语言设置，但是您可以通过将<summary>元素添加到<details> <summary>来对其进行更改：

要更改html中元素的状态，您只需添加open属性

 <!--  -  --> <details open> ... </details> <!--  -  --> <details> ... </details> 

为了使用JavaScript管理状态，提供了一个特殊的API：

 const details = document.querySelector('details') details.open = true //   details.open = false //   

关于可访问性的几句话

<summary>元素是<summary> 。 也就是说，通过键盘在页面上移动，您将到达此元素。 但是，只有打开<details> ，内容才能成为焦点，也就是说，焦点永远不会落在<details>内部的不可见元素上。

通常，屏幕阅读器可以很好地使用<details>和<summary>的标准用法。 广告中会有一些变化，具体取决于程序和浏览器。 更多细节 。

使用范例

接下来，我将大致重复引导文档中的某些组件，但是只使用少量JavaScript或不使用JavaScript。

更改标记

您可能需要做的第一件事就是更改标记的外观。 这非常简单地完成：

 summary::-webkit-details-marker { /*   */ } 

或者您可以隐藏标准标记并实现自己的标记

 /*    Chrome */ details summary::-webkit-details-marker { display: none } /*    Firefox */ details > summary { list-style: none; } /*       */ details summary:before { content: '\f0fe'; font-family: "Font Awesome 5 free"; margin-right: 7px; } /*       */ details[open] summary:before { content: '\f146'; } 

折叠组件

这里的一切都很简单。 基本功能是相同的。 只需稍微更改外观即可：

手风琴部分

让我们重复前面的示例，稍微改变<summary>的外观并获得手风琴：

但是，如您所见，一个元素在另一个元素打开时不会关闭。 为此，我们需要使用几行JavaScript。 您需要跟踪<details>元素之一上的open属性的外观，并将其从其余元素中删除：

弹出框组件

此实现与“折叠组件”非常相似，不同之处在于<details>内容具有绝对位置并与内容重叠。

下拉组件

基本上，这是相同的Popover组件。 只有外观不同。

相同的示例，仅带有单独的按钮

但是Dropdown Component还有一个重要的区别：在外部单击时，它应该被隐藏。 要再次实现此功能，您将需要编写几行JavaScript。

 //      document.body.onclick = () => { //    <details> document.body.querySelectorAll('details.dropdown[open]') //      .forEach(e => e.open = false) } 

模态分量

最后，是模态窗口的示例。

通常， <details>不是实现此组件的最佳选择。 有一个更合适的元素- <dialog> ，但是它对浏览器的支持非常差。

参考文献

我可以使用详细信息和摘要元素吗
MDN详细信息元素
W3C详细信息元素

UPD
我决定添加另一个使用<details>示例-多级导航。 我想再次提请您注意该示例无需任何JavaScript就可以运行的事实。 而且它比<div>上的传统布局更具包容性。