HTML 中的 <details> 和 <summary> 元素可用于为文本片段创建内容切换。 默认情况下，您会看到 <summary> 元素，旁边有一个切换三角形 (▶︎)。 点击它以展开 <details> 元素内的其余文本。
但假设您希望能够点击它使其展开，然后就结束了。 没有更多交互。 我在其中一个“阅读更多”文章设计中看到了这种用法，您点击“阅读更多”按钮，文章就会展开，但无法返回。
我首先要说明，我不确定这是否总是一个好主意。 删除控件感觉并不好，将过多的重要内容放入 <details> 元素中也不好。 但是，网络很大，您永远不知道自己可能需要什么。 能够用几行 HTML/CSS 完成这一点非常引人注目，并且可以减少对更复杂解决方案的需求。
这里的主要技巧是在 details 展开时隐藏 summary。
details[open] summary {
display: none;
}就是这样。
是的，很不错的小技巧。
我确实没有看到无法切换关闭的问题。 实际上，我在使用 jQuery 的网站上做过这样的事情，一旦打开，“更多”按钮就会消失，我认为它可以正常工作，因为它可以简化 UI 并减少用户的选项，而且他们无论如何都想阅读更多内容。
HTML 已经发展了很多，期待将来使用它。
为了补充这个很棒的技巧，如果您想保持 summary 可见，则应该能够取消指针事件。
这并不能阻止它被关闭。 指针事件规则
pointer-events仅阻止使用指针关闭它。它仍然可以通过键盘操作（以及可能的一些其他方法，例如一些语音控制，我还没有检查）关闭。
我来是为了 CSS。
我留下来是为了笑话。
如果我们想保持
<summary>可见，我们可以对其使用pointer-events: none;。在我看来，这似乎是误用。 HTML 规范指出，“用户代理应允许用户请求显示或隐藏附加信息。”
浏览器应该始终显示 summary。 它们可以不允许隐藏 summary，或者在隐藏自定义 summary 时显示默认 summary（“详细信息”）。
感谢您的提醒，Chris。
我自己也一直在使用 TL;DR 切换，因为我在一些主流网站（比如 3 Mobile）上看到了它们，但我无法决定是否有必要？
可能最好使用您描述的内容，这样它会更实用，但更少像是一种时尚选择，因此不会过时。
很棒的技巧！ 似乎可以用它来制作测验网站，在测验网站上，您显示问题并使用一个无法关闭的“显示答案” summary 切换。