html5<details>标签。

最新推荐文章于 2023-04-08 19:54:03 发布

玖相逢

最新推荐文章于 2023-04-08 19:54:03 发布

阅读量2.6k

点赞数 1

分类专栏：前端html 文章标签： html detail

前端html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原文地址：http://www.zhangxinxu.com/wordpress/2018/01/html5-details-summary-no-js-ux/

注：本文只有原文部分内容，且对内容有过修改，需要看原文请移步上方连接 ↑↑↑

<details> 标签是 HTML5 中的新标签，目前浏览器支持程度有所欠缺，最新支持情况可以点击https://caniuse.com

<details>标签的默认折叠展开效果

折叠效果是通过在<details>标签中添加open标签来控制折叠或展开的，有open则展开，去掉则折叠

    <details>
            <summary>标题</summary>
            <div>
                隐藏的内容
            </div>
    </details>

    <details open>
            <summary>标题</summary>
            <div>
                隐藏的内容
            </div>
    </details>

如此看来，应用的场景还是比较多的，但是三角图标的外观一般美工也不会设计成这个样子，但是可以通过修改样式来改变此图标

1、修改<details>三角形图标

实际上实际开发的时候，对小三角UI更便捷的定制方法是：隐藏浏览器原生的小三角，然后借助::before或::after伪元素重新生成我们想要的UI效果，下面这个案例就将展示相关的处理

在Chrome等浏览器下使用::-webkit-details-marker，在Firefox浏览器下使用::-moz-list-bullet可以对小三角进行UI控制，例如改变颜色，改变大小，使用自定义的图形代替，或者直接隐藏等

在Chrome浏览器下，我们可以直接设置display:none进行隐藏，但是这一招在Firefox浏览器下确实没有效果的，即使设置display:none!important也是如此，根据我的测试，只有font-size:0能够比较完美的隐藏。类似position:absolute;visibility:hidden这种常见的隐藏也是不行的，因为position:absolute无法生效。

以下是修改后效果

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 隐藏默认三角 chrome Safari*/
        details ::-webkit-details-marker {
            display: none;
        }
        /*隐藏默认三角 Firefox*/
        details ::-moz-list-bullet {
            font-size: 0;
        }
    
        /* 自定义的三角 */
        details:not([open]) summary::before {
            margin-left: -1.2em;
            transform: rotate(90deg);
        }
        details summary::before {
            content: '';
            position: absolute;
            width: 1em;
            height: 1em;
            margin-top: .1em;
            margin-left: -1.2em;
            background: url(http://www.zhangxinxu.com/study/201801/arrow-on.svg) no-repeat; 
                background-size: 100% 100%;
            transform: rotate(180deg);
            transition: transform .2s;
        }
        /*取消可以选定*/
        summary {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: pointer;
            margin-left: 1.1em;
        }
        summary {/*去掉标题的外边框*/
            outline: 0;
        }
        /*标题内嵌套<a>标签目的是让其可以选定，且使其选定后外边框不会选定一整行。可以看到默认情况下，选中或者点击后是有个外边框的，且占据一整行十分不美观*/
        summary a {
            color: inherit;
            text-decoration: none;
            pointer-events: none;
        }
        details>content {
            display: block;
            padding-left: 20px;
        }
    </style>
</head>
<body>
        <details>
                <summary><a href="javascript:;" onClick="this.parentNode.click();">一、级标签</a></summary>
                <content>
                    这是内容
                    <br>这是隐藏的内容
                    <br>这是隐藏的内容
                    <br>这是隐藏的内容
                    <br>这是隐藏的内容
                    <br>这是隐藏的内容
                </content>
        </details>
</body>
</html>

使用<details>可以实现我们平常常见的一些功能，如菜单下拉、树形结构等。

2、<details>标签实现树形结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 隐藏默认三角 chrome Safari*/
        details ::-webkit-details-marker {
            display: none;
        }
        /*隐藏默认三角 Firefox*/
        details ::-moz-list-bullet {
            font-size: 0;
        }
    
        /* 自定义的三角 */
        details:not([open]) summary::before {
            margin-left: -1.2em;
            border: 1px solid #999;
            background: linear-gradient(to right, #999, #999) no-repeat center,linear-gradient(to bottom, #999, #999) no-repeat center;
            background-size: 10px 2px,2px 10px;
        }
        details summary::before {
            content: '';
            position: absolute;
            width: 1em;
            height: 1em;
            margin-left: -1.2em;
            border: 1px solid #999;
            background: linear-gradient(to right, #999, #999) no-repeat center;
            background-size: 10px 2px;
        }
        summary {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: pointer;
            margin-left: 1.1em;
        }
        summary {
            outline: 0;
        }
        summary a {
            color: inherit;
            text-decoration: none;
            pointer-events: none;
        }
        details,summary{
            margin-bottom: 2px;
        }
        details>details,details>content {/*调整下缩进*/
            display: block;
            padding-left: 20px;
        }
    </style>
</head>
<body>
        <details>
                <summary><a href="javascript:;" onClick="this.parentNode.click();">一、级标签</a></summary>
                <details>
                        <summary><a href="javascript:;" onClick="this.parentNode.click();">1、OPTION</a></summary>
                        <content>a选项
                                <br> b选项
                                <br> c选项
                        </content>
                </details>
                <details>
                        <summary><a href="javascript:;" onClick="this.parentNode.click();">2、OPTION</a></summary>
                        <content>a选项
                                <br>b选项
                                <br>c选项
                        </content>
                </details>
        </details>
        <details>
                <summary><a href="javascript:;" onClick="this.parentNode.click();">一、级标签</a></summary>
                <details>
                        <summary><a href="javascript:;" onClick="this.parentNode.click();">1、OPTION</a></summary>
                        <content>a选项
                                <br> b选项
                                <br> c选项
                        </content>
                </details>
                <details>
                        <summary><a href="javascript:;" onClick="this.parentNode.click();">2、OPTION</a></summary>
                        <content>a选项
                                <br>b选项
                                <br>c选项
                        </content>
                </details>
        </details>
</body>
</html>

玖相逢

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
html5<details>标签。

原文地址：http://www.zhangxinxu.com/wordpress/2018/01/html5-details-summary-no-js-ux/注：本文只有原文部分内容，且对内容有过修改，需要看原文请移步上方连接 ↑↑↑&lt;details&gt; 标签是 HTML5 中的新标签，目前浏览器支持程度有所欠缺，最新支持情况可以点击https://caniuse.com&lt;det...
复制链接

扫一扫

专栏目录