可收起的内容部分（有时称为手风琴）是一种常见的界面模式。不过，您将无法使用页面内搜索功能搜索收起的部分中隐藏的内容。此外，您无法链接到收起区域内的文本片段。
hidden=until-found HTML 属性和 beforematch 事件可以解决这些问题。通过向隐藏内容的容器添加 hidden=until-found，您可以让浏览器搜索该隐藏区域中的文本，并在找到匹配项时显示该部分。
这些功能从 Chrome 102 开始提供，下面我们来看看它们的运作方式。
使用方法
如果您的网站上已有可收起的部分，并且您希望这些部分可供搜索，请将用于隐藏这些部分的样式替换为 hidden=until-found 属性。如果您的网页还有其他状态需要与您的版块是否显示保持同步，请添加一个 beforematch 事件监听器，该监听器将在浏览器显示 hidden=until-found 元素之前立即对该元素触发。
注意事项
为了提供一致的用户体验，hidden=until-found 内容应在不使用页内搜索功能的情况下可供显示。并非所有用户都会使用页内搜索功能，并且不支持 hidden=until-found 的浏览器将获得隐藏内容的原始体验，而不会显示页内搜索结果。
如果您想确保隐藏的内容在不支持 hidden=until-found 的浏览器中可供搜索，可以随时在这些浏览器中展开隐藏的内容。您可以通过检查是否存在 beforematch 事件处理脚本来进行功能检测：
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found 会应用 content-visibility:hidden CSS 属性，而不是常规“hidden”属性应用的 display:none 属性。这是为了在内容处于关闭状态时搜索内容，但也带来了以下副作用：
- 某些布局 API（例如
getBoundingClientRect）会报告hidden=until-found元素中的隐藏内容会占用空间，并且在网页中具有位置。 - 系统不会渲染
hidden=until-found元素的子节点，但hidden=until-found元素本身仍会显示一个框。这意味着边框和显式大小等 CSS 属性仍会影响渲染。
例如，以下演示会向应用了 hidden=until-found 的元素添加边距、边框和内边距。隐藏内容将显示在带灰色边框的框中，当隐藏内容显示时，该框会填充相应内容。这是隐藏元素的框。
为避免此问题，请将边框添加到包含 hidden=until-found 的容器中嵌套的元素。