四川盐亭网站制作公司

利用HTML5的details,summary怎么实现各种交互效果

这篇文章将为大家详细讲解有关利用HTML5的details, summary怎么实现各种交互效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、网站制作、瑞丽网络推广、小程序设计、瑞丽网络营销、瑞丽企业策划、瑞丽品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供瑞丽建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

本文利用的是HTML5 details, summary

首先

一、了解HTML5 details, summary默认交互行为

标签在Chrome，Firefox等浏览器下默认是有展开收起行为的，例如下面HTML：



    这是摘要1

    
这里具体描述，标签相对随意，例如这里使用的<p>标签。

结果UI表现为：

利用HTML5的details, summary怎么实现各种交互效果

具体描述为：

1、只显示了

标签内容，而

默认隐藏了；

2、

标签前面出现了一个小三角；

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

OK，我们不妨就点击一下，结果如下图：

利用HTML5的details, summary怎么实现各种交互效果

具体描述为：

  1. 原本隐藏的

    标签显示出来了；

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

此时我们再一次点击，

标签内容又会隐藏收起，箭头方向还原，如下图：

利用HTML5的details, summary怎么实现各种交互效果

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

展开与收起是通过open属性控制的

通过在

标签上添加布尔类型的open属性，可以让我们的详情信息默认就是展开状态，如下HTML示意：


    这是摘要2
    这里<details>标签设置了HTML布尔属性open，因此，默认是展开状态。

结果如下截图：

利用HTML5的details, summary怎么实现各种交互效果

如果我们使用JS脚本手动移除这个open属性，即使没有点击行为的发生，我们内容也会收起。

如果缺省

标签如果缺省，则
元素会在内部自动创建一个内容，默认的文案是“详细信息”。如下HTML代码：


    
如果<summary>缺省，则会自动补上，文案是“详细信息”。

结果如下截图所示：

利用HTML5的details, summary怎么实现各种交互效果

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

标签默认的小三角样式有些简陋，在实际应用的时候，往往不是我们希望的样子，不要担心，我们是可以对其进行自定义的。在Chrome等浏览器下使用::-webkit-details-marker，在Firefox浏览器下使用::-moz-list-bullet可以对小三角进行UI控制，例如改变颜色，改变大小，使用自定义的图形代替，或者直接隐藏等，我们来看几个简单的案例。

案例1：小三角右侧显示同时颜色变淡

HTML代码如下：


    这是示例1
    本案例展示对小三角UI重定义：包括显示在右侧，颜色减淡等。

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;
}

结果如下图所示：

利用HTML5的details, summary怎么实现各种交互效果

当我们点击摘要标题升起的时候，表现为下图（截自Firefox）：

利用HTML5的details, summary怎么实现各种交互效果

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

案例2：隐藏浏览器原生的小三角并使用自定义三角替换

HTML结构还是类似的：


    这是示例2
    本案例隐藏原生小三角，使用自定义小三角。

CSS主要分为2部分，一部分是隐藏浏览器原生的小三角，另外一部分是使用伪元素生成自定义的三角效果。

首先看一下隐藏

标签默认的小三角的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);    
}

最终效果如下图所示：

利用HTML5的details, summary怎么实现各种交互效果

收起时候：

利用HTML5的details, summary怎么实现各种交互效果

最后有一点需要注意一下，就是如果

标签内并没有元素，则我们的对三角的自定义代码都是无效的，可以使用一个空的元素占位，类似这样：


    
    内容。

三、Chrome浏览器下点击时候outline轮廓等体验处理

UI可以定制了，但是还有个不容忽视的体验问题，那就是在Chrome浏览器下点击时候会出现outline轮廓，如下图所示：

利用HTML5的details, summary怎么实现各种交互效果

在实际项目开发的时候，产品和设计一定会让你把这个效果去掉的。以及，当我们

元素点击较快的时候，文本会被选中，也不是我们想看到的。

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

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

对于outline轮廓，比较直接的做法是：

summary {
  outline: 0;
}

但是这样处理对无障碍访问而是非常不友好的，那有没有什么办法兼顾视觉体验和无障碍访问体验呢？

我的做法是这样子的：

  1. 利用标签的outline交互体验

浏览器对标签元素的outline轮廓进行了专门的体验优化处理，鼠标点击的时候不显示轮廓，键盘访问时候显示轮廓。于是我们可采用李代桃僵策略，让

元素的outline交给元素，方法就是在中再内嵌一个，同时通过tabindex属性remove掉原本的可访问性。HTML代码示意如下：


    这是示例
    点击无外框，键盘focus有。

CSS如下：

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

此时，在Chrome浏览器下，我们点击摘要信息，没有任何outline轮廓出现；但是当我们使用Tab键索引时候，可以看到下图所示的轮廓效果：

利用HTML5的details, summary怎么实现各种交互效果

轮廓区域比原生的

要小，但这无伤大雅，而且实际项目开发的时候，我们会去掉小箭头，此时只要设置标签display:block，则轮廓就可以和保持一致了。

接下来，我们按下Space空格键，就会发现

元素内的内容信息不断的展开与收起：

利用HTML5的details, summary怎么实现各种交互效果

然后上面实现并不完美，相比原生的

元素，Enter回车键展开收起效果丢失了。这是因为HTML元素中如果多个focusable同时带click浏览器行为元素嵌套的时候，点击里面的元素，外部元素的浏览器行为是不会触发的。类似的有标签。

对于标签，其浏览器行为只能通过回车键触发，空格键是无效的；但是对于

，回车键和空格键都能触发展开收起行为，这就是为什么上面代码空格键有效，回车键无效的原因。

如果想要同时支持回车键展开与收起，可以对HTML如下处理：


    这是示例
    点击无外框，键盘focus有。

需要注意的是上面处理在

自己额外绑定click事件时候可能会有double触发的问题，此时，阻止元素的冒泡即可。

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

这个方法不需要对HTML进行任何的改动，是通过CSS和JS配合对全局的

元素进行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复制到页面中，视觉体验和交互体验完美支持的

元素outline效果就有了。

表现为，点击

没有任何outline，键盘focus时候出现，且和浏览器原生outline效果一模一样，Space键和Enter键展开与收起访问完全保留。

例如下图就是键盘Tab键focus后回车后的效果：

利用HTML5的details, summary怎么实现各种交互效果

每每看到如此极致的用户体验处理，心情都大好。

原理：
关键是全局监听keydown事件，如果有发生，则认为此100毫秒内的页面focus行为均是键盘产生，从而有效区分是点击触发的focus行为还是键盘触发的focus行为，如果是键盘触发，给

元素手动增加outline效果。

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

了解了

元素的点击交互行为；解决了UI定制难题；解决了outline的体验问题，下面我们就可以付诸实践，不借助任何JS来实现各种我们平常见到的交互效果。

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

实现最终效果如下gif：

利用HTML5的details, summary怎么实现各种交互效果

因为“更多”元素是在底部，因此效果实现的要点的所有的内容信息都放在

元素内部，然后通过
元素的open属性控制UI的变化。

HTML和CSS代码如下，其中，最核心部分已经红色高亮：


    
        
据台媒报道，大...青睐。

        

            
其他几首歌曲...

        

        更多
     


::-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：

利用HTML5的details, summary怎么实现各种交互效果

没有任何JS参与。HTML结构如下：


    我的消息 
    

        我的回答12
        我的私信
        未评价订单2
        我的关注

然后CSS让.box元素绝对定位即可，显示和隐藏

元素内置行为就搞定了。

案例3：accordion多项折叠效果

此效果常见于条目比较多的垂直导航栏，新闻条目等。

例如下面实现的效果：

利用HTML5的details, summary怎么实现各种交互效果

这个更加简单了，就是一堆

元素并排放置就可以了，如下HTML：


    
订单中心
 
    
我的订单

    
我的活动

    
评价晒单

    
购物助手





    
关注中心
 
    
关注的商品

    ...




    ...

计算CSS没有任何设置，效果也天然达成。

案例3中的展开项显示的时候是非常生硬的突然显示，实际上我们可以借助一些选择器技巧以及CSS3 transition属性让菜单展开收起的时候是有动画效果的，效果如下gif截图：

利用HTML5的details, summary怎么实现各种交互效果

此效果实现原理核心是[open]属性选择器，和加号+相邻兄弟选择器。

首先看下HTML，展开列表结构发生了变化，不是作为

的子元素，而是作为其相邻兄弟元素存在，HTML示意：

订单中心



    
我的订单

    
我的活动

    
评价晒单

    
购物助手



...

上面

定义列表就是展开收起的内容，其作为兄弟元素和
元素平起平坐，于是，我们就可以利用点击元素
元素的open属性会变化的特性实现我们想要的动画效果，CSS如下：

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

借助相邻兄弟选择器以及max-height任意元素slideUp/slideDown技术就可以效果达成。

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

这里的树形菜单效果实现也很简单，多个

元素相互嵌套就可以，效果Gif如下：

利用HTML5的details, summary怎么实现各种交互效果

HTML结构大致如下：


    我的视频
    

        爆肝工程师的异世界狂想曲
        
tv1-720p.mp4

        
tv2-720p.mp4

        ...
        
tv10-720p.mp4

    

    

        七大罪
        
七大罪B站00合集.mp4

    

    
珍藏动漫网盘地址.txt

    
我们的小美好.mp4

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的语义不要行为

如果只想要

元素，元素的语义，但是并不需要点击展开收起的行为，该怎么处理呢？

例如，某评论，或者某帖子有标题和正文，非常符合详情-概要-内容的语义，但是希望是纯展示的，点击时候不收起，可以这么处理：

1.

标签设置tabindex="-1"让键盘无法访问；
2.设置CSS：

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

这样就不能点，也不会有outline轮廓。

六、兼容性以及Polyfill

兼容性如下图：

利用HTML5的details, summary怎么实现各种交互效果

除了IE和Edge浏览器，大好河山一片绿，至少移动端可以用得比较开心。

如果想要在桌面web网页使用

元素的棒棒哒特性，我们可以对其进行Polyfill

对键盘访问，事件toggle都做了兼容。

如果开发策略是对不支持的IE进行特异处理，则下面的JS判断是否支持

元素的脚本可能对你有用：

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

最后，无JS实现的好处有：

省了代码，加载快了；
实现更简单了，开发快了；
JS还没加载交互也能进行，体验好了；
键盘无障碍和aria阅读设备无障碍天然支持，体验档次高了。

关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


当前标题：利用HTML5的details,summary怎么实现各种交互效果
文章URL：http://scyanting.com/article/psdocs.html

其他资讯