<details> 元素竟然有如此实用的隐藏特性

avatar

需求

有一个树形(N级)侧边栏, 其中包含了很多菜单项, 当我们使用浏览器自带搜索功能进行搜索时, 如果搜索到了菜单项, 则自动展开层级, 显示出搜索到的菜单项

image.png

分析

  • 如何监听浏览器自带的搜索功能?
  • 如何得知搜索命中了哪些菜单项?

关于浏览器自带的搜索功能, 查阅资料发现有一个可能被废弃的 API: window.find, 但实现不了我们的需求.

其他相关的 API 有

多少沾点边, 但都实现不了我们的需求, 真没想到这么麻烦.

偶遇 <details> 元素

就在我一筹莫展的时候, 边搜索边翻看着某个网站的文档, 突然我发现搜索的时候, 页面上搜索命中的内容竟然自动展开了!

真是踏破铁鞋无觅处, 得来全不费工夫啊!

我立马观察了一下页面上的实现, 发现只是使用了 <details> 元素, 难道搜索时 <details> 自带神奇的自动展开特性?

验证 <details> 的隐藏特性

于是我写了一个 demo 一探究竟!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索时 details 神奇的自动展开特性</title>
    <style>
    /**
     * 以下样式只是为了让多级结构更好看一些, 不是必须要设置这些样式
     */
    details > details {
        margin-left: 18px;
    }
    details > div {
        margin-left: 18px;
    }
    </style>
</head>
<body>
    <h1>搜索时 details 神奇的自动展开特性</h1>
    <details>
        <summary>单级</summary>
        <div>内容</div>
    </details>
    <details>
        <summary>多级</summary>
        <details>
            <summary>1</summary>
            <details>
                <summary>1.1</summary>
                <div>内容</div>
            </details>
        </details>
    </details>
</body>
</html>

setCur1.gif

原来这一切就是浏览器自带的默认行为, 搜索的时候, 如果命中了 <details> 元素包含的内容, <details> 元素就会自动展开!

就这么简单! 打完收工!

avatar
文章
阅读
粉丝