使用详细信息和摘要 HTML 标签轻松显示和隐藏内容

这是一个巧妙的小技巧：

您可以使用<details>和<summary>HTML 标签来创建简单的可折叠/可折叠 UI。

这里唯一的问题是它看起来相当平淡和无趣。

但几行 CSS 代码就能搞定！只需稍加修改样式，效果如下。

记住，你可以点击“打开沙盒”按钮，自己编辑样式。我相信你一定能让它看起来更漂亮。😄

哦，这是 CSS 代码，看一下。它用了一些小技巧padding，box-shadow让“边框”看起来更一致，但除此之外，其他改动都很简单。

/* The --padding variable help us control 
the <details> and <summary> spacing */
:root {
  --padding: 16px;
}

details {
  padding: 0 var(--padding);
  box-shadow: inset 0 0 0 4px;
  border-radius: 4px;
}
details[open] {
  padding-bottom: var(--padding);
}

details > summary {
  display: flex;
  padding: var(--padding);
  margin: 0 calc(var(--padding) * -1);
  border-radius: 4px;
  font-size: 24px;
  cursor: pointer;
  justify-content: space-between;
  list-style: none; /* Hides the default arrow */
}
details[open] > summary {
  box-shadow: 0 4px;
}
/* Adds an icon when the <details> is closed... */
details > summary::after {
  content: "+";
}
/* ...and switches it when <details> is open */
details[open] > summary::after {
  content: "-";
}
/* Removes the ugly default arrow on Chrome */
details > summary::-webkit-details-marker {
  display: none;
}

我喜欢使用纯 HTML 和 CSS 可以完成这么多事情。

通过使用标准 HTML 标签，您可以免费获得出色的可访问性！

但请稍等，还有更多！

您甚至可以更进一步，将这两个标签转换成一个功能强大且可重复使用的组件。

让我们添加一些 React 代码吧！⚛️

这两个标签与 React 的组件组合模式配合得很好。

因此，您可以继续创建一个组件来帮助您更一致、更轻松地切换内容。

看：

然后您可以导入该组件并像这样使用它：

当您需要快速实现一些手风琴功能时，这是工具带上的一个重要组件。

感谢您查看这个巧妙的小技巧👋

我希望它能很快派上用场！

你有什么好建议吗？欢迎在评论区留言！

哦！别忘了看看下面这个系列的其他文章。它们都是一些精彩的 Web 开发知识点。

封面照片由Dominik Vanyi在 Unsplash 上拍摄

嘿，我们联系吧👋

在 Twitter 上关注我并告诉我您喜欢这篇文章！

如果你真的喜欢它，请务必与你的朋友分享，这会对我有很大帮助😄

鏂囩珷鏉yu簮锛�https://dev.to/vtrpldn/show-and-hide-content-easily-with-details-and-summary-html-tags-3eif