原生 HTML：手风琴

如果你回想一下 10 年前 JQuery 风靡一时的时代，你可能会记得JQuery UI是多么的普及，它意味着网站突然拥有了更多的功能和元素。其中之一就是不起眼的手风琴折叠面板。

但那是十年前的事了，我们不再需要 JavaScript 库来完成繁重的工作，平台已经取得了长足的进步。所以今天我们将讨论<details>和<summary>，它们相当于现代版的手风琴。实际上，支持效果很好，只有一个值得注意的缺陷。

详细信息元素

与往常一样，我们首先来看看 Mozilla 在其<details>页面上说了什么。

HTML 详细信息元素( <details>)创建一个公开窗口小部件，其中的信息仅在窗口小部件切换为“打开”状态时可见。可以使用该<summary>元素提供摘要或标签。

公开小部件通常以一个小三角形的形式呈现在屏幕上，该三角形会旋转（或扭转）以指示打开/关闭状态，并在三角形旁边显示一个标签。如果元素的第一个子元素<details>是<summary>，则该元素的内容<summary>将用作公开小部件的标签。

通过阅读我们了解到<details>元素有两种状态，open和closed，并且它期望一个<summary>元素作为其第一个子元素，但并不要求有一个。

摘要元素

现在我们可以看看<summary>元素的描述。

HTML 披露摘要元素 (<summary> )指定<details>元素披露框的摘要、标题或图例。点击该元素可切换父元素的打开和关闭<summary>状态。<details>

我们在这里实际上并没有学到太多额外的内容，这是因为这两个元素联系非常紧密，除了单击摘要文本会切换详细信息。

使用它

让我们看看如何使用它。

<details>
  <summary>Read more</summary>
  Some text to be hidden. 
</details>

就是这样，虽然它的标准形式看起来不是最好看的元素，但它确实能完成工作。

造型

我在这篇文章的开头回顾了 JQuery UI 的手风琴面板，因此将我们的<details>块设计得看起来相似似乎是唯一合适的。

details {
  overflow: hidden;
  margin-top: 0.125em;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 3px;
}

details summary {
  display: block;
  cursor: pointer;
  padding: .5em .5em .5em .7em;
  background: #ededed;
  color: #2b2b2b;
  border-radius: 3px 3px 0 0;
}

details:not([open]) summary:hover,
details:not([open]) summary:focus {      
  background: #f6f6f6;
  color: #454545;
}

details[open] summary {
  border: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}

details main {
  padding: 1em 2.2em;
}

<details>
  <summary>Summary</summary>
  <main>Text to hide away.</main>
</details>

但也有一些注意事项；

不幸的是，目前还没有内置的方式来实现打开和关闭之间的动画转换。

此外，手风琴折叠面板做了一些不同的事情，一次只能打开一个项目，我们可以用 JS 修复这个限制，并且键盘导航更像是一个单选按钮组，而不是制表符。

总结

因此，我们有了另一个原生 HTML 元素和另一个使用更少 JavaScript 的机会。

一如既往，如果您不同意我的观点，请告诉我原因，我很乐意听取您的不同意见。另外，也请随时提出其他值得我参考的元素。

感谢您阅读❤❤🦄❤🦄❤❤