正文

应用HTML5的details, summary完成种种交互结果【html5教程】

搜搜PHP网
搜搜PHP网 V管理员 /124 阅读
1126
本篇文章给人人带来的内容是关于运用HTML5的details, summary完成种种交互效果，有肯定的参考价值，有须要的朋侪可以参考一下，愿望对你有所协助。

本文运用的是HTML5 details, summary

起首

一、相识HTML5 details, summary默许交互行动

<details> 标签在Chrome，Firefox等浏览器下默许是有睁开收起行动的，比方下面HTML：

<details>

    <summary>这是择要1</summary>

    <p>这里细致形貌，标签相对随便，比方这里运用的&lt;p&gt;标签。</p>

</details>

效果UI表现为：

细致形貌为：

1、只显现了<summary>标签内容，而<p>默许隐蔽了；

2、<summary>标签前面涌现了一个小三角；

小三角图形的隐喻是：我是可点击的，点击我能够会涌现宝箱。

OK，我们无妨就点击一下，效果以下图：

细致形貌为：

  1. 底本隐蔽的<p>标签显现出来了；

  2. <summary>标签前面的小三角方向朝下了；

此时我们再一次点击，<p>标签内容又会隐蔽收起，箭头方向复原，以下图：


活脱脱一个天然的睁开收起效果。

睁开与收起是经由过程open属性掌握的

经由过程在<details>标签上增添布尔范例的open属性，可以让我们的概况信息默许就是睁开状况，以下HTML表示：

<details open>
    <summary>这是择要2</summary>
    <content>这里&lt;details&gt;标签设置了HTML布尔属性open，因而，默许是睁开状况。</content>
</details>

效果以下截图：

假如我们运用JS剧本手动移除这个open属性，纵然没有点击行动的发作，我们内容也会收起。

<summary>假如缺省

<summary>标签假如缺省，则<details>元素会在内部自动建立一个<summary>内容，默许的案牍是“细致信息”。以下HTML代码：

<details open>
    <p>假如&lt;summary&gt;缺省，则会自动补上，案牍是“细致信息”。</p>
</details>

效果以下截图所示：

二、details浏览器内置UI可以自定义

<details>标签默许的小三角款式有些大略，在现实运用的时刻，往往不是我们愿望的模样，不要忧郁，我们是可以对其举行自定义的。在Chrome等浏览器下运用::-webkit-details-marker，在Firefox浏览器下运用::-moz-list-bullet可以对小三角举行UI掌握，比方转变色彩，转变大小，运用自定义的图形替代，或许直接隐蔽等，我们来看几个简朴的案例。

案例1：小三角右边显现同时色彩变淡

HTML代码以下：

<details class="details-1" open>
    <summary>这是示例1</summary>
    <content>本案例展现对小三角UI重定义：包含显现在右边，色彩减淡等。</content>
</details>

CSS以下：

.details-1 summary {
    width: -moz-fit-content;
    width: fit-content;
    direction: rtl;
}
.details-1 ::-webkit-details-marker {
    direction: ltr;
    color: gray;
    margin-left: .5ch;
}
.details-1 ::-moz-list-bullet {
    direction: ltr;
    color: gray;
    margin-left: .5ch;
}

效果以下图所示：

当我们点击择要题目升起的时刻，表现为下图（截自Firefox）：

而现实上现实开辟的时刻，对小三角UI更便利的定制要领是：隐蔽浏览器原生的小三角，然后借助::before或::after伪元素从新生成我们想要的UI效果，下面这个案例就将展现相干的处置惩罚。

案例2：隐蔽浏览器原生的小三角并运用自定义三角替代

HTML构造照样相似的：

<details class="details-2" open>
    <summary>这是示例2</summary>
    <content>本案例隐蔽原生小三角，运用自定义小三角。</content>
</details>

CSS重要分为2部份，一部份是隐蔽浏览器原生的小三角，别的一部份是运用伪元素生成自定义的三角效果。

起首看一下隐蔽<details>标签默许的小三角的CSS：

/* 隐蔽默许三角 */
.details-2 ::-webkit-details-marker {
    display: none;
}
.details-2 ::-moz-list-bullet {
    font-size: 0;
}

可以看到Chrome浏览器和Firefox浏览器的小三角隐蔽采纳的是差别的战略。在Chrome浏览器下，我们可以直接设置display:none举行隐蔽，然则这一招在Firefox浏览器下确切没有效果的，纵然设置display:none!important也是云云，依据我的测试，只需font-size:0可以比较圆满的隐蔽。相似position:absolute;visibility:hidden这类罕见的隐蔽也是不可的，由于position:absolute没法见效。

然后是自定义小三角显现的CSS，这里采纳的是::after伪元素模仿的:

/* 自定义的三角 */
.details-2 summary::after {
    content: '';
    position: absolute;
    width: 1em; height: 1em;
    margin: .2em 0 0 .5ch;
    background: url(./arrow-on.svg) no-repeat;
    background-size: 100% 100%;
    transition: transform .2s;
}
.details-2:not([open]) summary::after {
    margin-top: .25em;
    transform: rotate(90deg);    
}

终究效果以下图所示：

收起时刻：

末了有一点须要注重一下，就是假如<details>标签内并没有<summary>元素，则我们的对三角的自定义代码都是无效的，可以运用一个空的<summary>元素占位，相似如许：

<details>
    <summary></summary>
    <content>内容。</content>
</details>

三、Chrome浏览器下点击时刻outline表面等体验处置惩罚

UI可以定制了，然则另有个不容忽视的体验题目，那就是在Chrome浏览器下点击时刻会涌现outline表面，以下图所示：

在现实项目开辟的时刻，产物和设想肯定会让你把这个效果去掉的。以及，当我们<summary>元素点击较快的时刻，文本会被选中，也不是我们想看到的。

阻挠文本选中，我们可以：

summary {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

关于outline表面，比较直接的做法是：

summary {
  outline: 0;
}

然则如许处置惩罚对无障碍接见而是异常不友好的，那有没有什么方法统筹视觉体验和无障碍接见体验呢？

我的做法是这模样的：

  1. 运用<a>标签的outline交互体验

浏览器对<a>标签元素的outline表面举行了特地的体验优化处置惩罚，鼠标点击的时刻不显现表面，键盘接见时刻显现表面。因而我们可采纳李代桃僵战略，让<summary>元素的outline交给<a>元素，要领就是在<summary>中再内嵌一个<a>，同时经由过程tabindex属性remove掉<summary>底本的可接见性。HTML代码表示以下：

<details open>
    <summary tabindex="-1"><a href="javascript:">这是示例</a></summary>
    <content>点击无外框，键盘focus有。</content>
</details>

CSS以下：

summary {
    user-select: none;
    outline: 0;
}
summary a {
    color: inherit;
}

此时，在Chrome浏览器下，我们点击择要信息，没有任何outline表面涌现；然则当我们运用Tab键索引时刻，可以看到下图所示的表面效果：

表面地区比原生的<summary>要小，但这无伤大雅，而且现实项目开辟的时刻，我们会去掉小箭头，此时只需设置<a>标签display:block，则表面就可以和<summary>保持一致了。

接下来，我们按下Space空格键，就会发明<details>元素内的内容信息不停的睁开与收起：

然后上面完成并不圆满，比拟原生的<summary>元素，Enter回车键睁开收起效果丧失了。这是由于HTML元素中假如多个focusable同时带click浏览器行动元素嵌套的时刻，点击内里的元素，外部元素的浏览器行动是不会触发的。相似的有<label>内嵌<a>标签。

关于<a>标签，其浏览器行动只能经由过程回车键触发，空格键是无效的；然则关于<summary>，回车键和空格键都能触发睁开收起行动，这就是为何上面代码空格键有效，回车键无效的缘由。

假如想要同时支撑回车键睁开与收起，可以对HTML以下处置惩罚：

<details open>
    <summary tabindex="-1"><a href="javascript:" onClick="this.parentNode.click();">这是示例</a></summary>
    <content>点击无外框，键盘focus有。</content>
</details>

须要注重的是上面处置惩罚在<summary>本身分外绑定click事宜时刻能够会有double触发的题目，此时，阻挠<a>元素的冒泡即可。

  1. JS捕捉键盘行动手动设置outline

这个要领不须要对HTML举行任何的修改，是经由过程CSS和JS合营对全局的<summary>元素举行outline优化。

CSS以下：

summary {
    user-select: none;
    outline: 0;
}
summary[focus] {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
}

JS以下：

window.addEventListener('keydown', function () {    
    window.isKeyEvent = true;
    setTimeout(function () {
        window.isKeyEvent = false;
    }, 100);    
});

document.addEventListener('focusin', function (event) {
    var target = event.target;
    if (target && target.tagName.toLowerCase() == 'summary' && window.isKeyEvent == true) {
        target.setAttribute('focus', '');
    }
});
document.addEventListener('focusout', function (event) {
    var eleFocusAll = document.querySelectorAll('summary[focus]');
    [].slice.call(eleFocusAll).forEach(function (summary) {
        summary.removeAttribute('focus');
    });
});

只需把上面的CSS和JS复制到页面中，视觉体验和交互体验圆满支撑的<summary>元素outline效果就有了。

表现为，点击<summary>没有任何outline，键盘focus时刻涌现，且和浏览器原生outline效果如出一辙，Space键和Enter键睁开与收起接见完整保存。

比方下图就是键盘Tab键focus后回车后的效果：

往往看到云云极致的用户体验处置惩罚，心境都大好。

道理：
关键是全局监听keydown事宜，假如有发作，则认为此100毫秒内的页面focus行动均是键盘发生，从而有效辨别是点击触发的focus行动照样键盘触发的focus行动，假如是键盘触发，给<summary>元素手动增添outline效果。

四、基于details元素行动的种种交互效果案例

相识了<details>元素的点击交互行动；处理了UI定制困难；处理了outline的体验题目，下面我们就可以付诸实践，不借助任何JS来完成种种我们平罕见到的交互效果。

案例1：“更多”睁开与收起效果

完成终究效果以下gif：

由于“更多”元素是在底部，因而效果完成的要点的一切的内容信息都放在<summary>元素内部，然后经由过程<details>元素的open属性掌握UI的变化。

HTML和CSS代码以下，个中，最中间部份已赤色高亮：

<details>
    <summary>
        <p>据台媒报导，大...喜爱。</p>
        <p class="more">
            <p>其他几首歌曲...</p>
        </p>
        <a>更多</a>
    </summary> 
</details>
::-webkit-details-marker {
    display: none;
}
::-moz-list-bullet {
    font-size: 0;
    float: left;
}
.more {
    display: none;
}
[open] .more {
    display: block;
}
[open] summary a {
    font-size: 0;
}
[open] summary a::before {
    content: '收起';
    font-size: 14px;
}

把“更多”对应的信息放在.more元素内，然后经由过程[open]属性选择器掌握器显现，效果即杀青。

案例2：无JS完成点击显现悬浮菜单，自定义下拉框等效果

效果以下gif：

没有任何JS介入。HTML构造以下：

<details>
    <summary>我的音讯</summary> 
    <div class="box">
        <a href>我的回覆<sup>12</sup></a>
        <a href>我的私信</a>
        <a href>未评价定单<sup>2</sup></a>
        <a href>我的关注</a>
    </div>
</details>

然后CSS让.box元素相对定位即可，显现和隐蔽<details>元素内置行动就搞定了。

案例3：accordion多项折叠效果

此效果罕见于条目比较多的垂直导航栏，消息条目等。

比方下面完成的效果：

这个越发简朴了，就是一堆<details>元素并排安排就可以了，以下HTML：

<details open>
    <summary><dt>定单中间</dt></summary> 
    <dd><a href>我的定单</a></dd>
    <dd><a href>我的运动</a></dd>
    <dd><a href>评价晒单</a></dd>
    <dd><a href>购物助手</a></dd>
</details>
<details open>
    <summary><dt>关注中间</dt></summary> 
    <dd><a href>关注的商品</a></dd>
    ...
</details>
<details open>
    ...
</details>

盘算CSS没有任何设置，效果也天然杀青。

案例3中的睁开项显现的时刻是异常僵硬的倏忽显现，现实上我们可以借助一些选择器技能以及CSS3 transition属性让菜单睁开收起的时刻是有动画效果的，效果以下gif截图：

此效果完成道理中间是[open]属性选择器，和加号+相邻兄弟选择器。

起首看下HTML，睁开列表构造发作了变化，不是作为<details>的子元素，而是作为其相邻兄弟元素存在，HTML表示：

<details open><summary>定单中间</summary></details>
<dl>
    <dd><a href>我的定单</a></dd>
    <dd><a href>我的运动</a></dd>
    <dd><a href>评价晒单</a></dd>
    <dd><a href>购物助手</a></dd>
</dl>
...

上面<dl>定义列表就是睁开收起的内容，其作为兄弟元素和<details>元素等量齐观，因而，我们就可以运用点击<summary>元素<details>元素的open属性会变化的特征完成我们想要的动画效果，CSS以下：

details + dl {
    max-height: 0;
    transition: max-height .25s;
    overflow: hidden;
}
[open] + dl {
    max-height: 100px;
}

借助相邻兄弟选择器以及max-height恣意元素slideUp/slideDown手艺就可以效果杀青。

案例5：多级嵌套的树形菜单交互效果

这里的树形菜单效果完成也很简朴，多个<details>元素互相嵌套就可以，效果Gif以下：

HTML构造大抵以下：

<details>
    <summary>我的视频</summary>
    <details>
        <summary>爆肝工程师的异天下狂想曲</summary>
        <div>tv1-720p.mp4</div>
        <div>tv2-720p.mp4</div>
        ...
        <div>tv10-720p.mp4</div>
    </details>
    <details>
        <summary>七大罪</summary>
        <div>七大罪B站00合集.mp4</div>
    </details>
    <div>收藏动漫网盘地点.txt</div>
    <div>我们的小优美.mp4</div>
</details>

CSS的重要事情就是绘制菜单前面的加号和减号图形，比方我们可以借助background线性渐变，相干CSS以下：

details {
    padding-left: 20px;
}
summary::before {
    content: '';
    display: inline-block;
    width: 12px; height: 12px;
    border: 1px solid #999;
    background: linear-gradient(to right, #999, #999) no-repeat center, linear-gradient(to top, #999, #999) no-repeat center;
    background-size: 2px 10px, 10px 2px;
    vertical-align: -2px;
    margin-right: 6px;
    margin-left: -20px;
}
[open] > summary::before {
    background: linear-gradient(to right, #999, #999) no-repeat center;
    background-size: 10px 2px;
}

效果即杀青！

五、假如只想要details/summary的语义不要行动

假如只想要<details>元素，<summary>元素的语义，然则并不须要点击睁开收起的行动，该怎样处置惩罚呢？

比方，某批评，或许某帖子有题目和正文，异常相符概况-提要-内容的语义，然则愿望是纯展现的，点击时刻不收起，可以这么处置惩罚：

1.<summary>标签设置tabindex="-1"让键盘没法接见；
2.设置CSS：

summary {
  outline: 0;
  pointer-events: none;
}

如许就不能点，也不会有outline表面。

六、兼容性以及Polyfill

兼容性以下图：

除了IE和Edge浏览器，大好河山一片绿，最少挪动端可以用得比较高兴。

假如想要在桌面web网页运用<details>元素的棒棒哒特征，我们可以对其举行Polyfill

对键盘接见，事宜toggle都做了兼容。

假如开辟战略是对不支撑的IE举行特异处置惩罚，则下面的JS推断是不是支撑<details>元素的剧本能够对你有效：

var isSupportDetails = 'open' in document.createElement('details');

末了，无JS完成的优点有：

省了代码，加载快了；
完成更简朴了，开辟快了；
JS还没加载交互也能举行，体验好了；
键盘无障碍和aria浏览装备无障碍天然支撑，体验层次高了。

以上就是运用HTML5的details, summary完成种种交互效果的细致内容，更多请关注ki4网别的相干文章！

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创；版权归原作者所有，仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：i-hu@foxmail.com