利用HTML5的details,summary怎么实现各种交互效果
这篇文章将为大家详细讲解有关利用HTML5的details, summary怎么实现各种交互效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、网站制作、瑞丽网络推广、小程序设计、瑞丽网络营销、瑞丽企业策划、瑞丽品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供瑞丽建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
本文利用的是HTML5 details, summary
首先
一、了解HTML5 details, summary默认交互行为
这是摘要1
这里具体描述,标签相对随意,例如这里使用的<p>标签。
结果UI表现为:
具体描述为:
1、只显示了
标签内容,而默认隐藏了;
2、
标签前面出现了一个小三角;小三角图形的隐喻是:我是可点击的,点击我可能会出现宝箱。
OK,我们不妨就点击一下,结果如下图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13385.jpg)
具体描述为:
原本隐藏的
标签显示出来了;
标签前面的小三角方向朝下了;
此时我们再一次点击,
标签内容又会隐藏收起,箭头方向还原,如下图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13386.jpg)
活脱脱一个天然的展开收起效果。
展开与收起是通过open属性控制的
通过在
标签上添加布尔类型的open属性,可以让我们的详情信息默认就是展开状态,如下HTML示意:
这是摘要2
这里<details>标签设置了HTML布尔属性open,因此,默认是展开状态。
结果如下截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/1603348331.png)
如果我们使用JS脚本手动移除这个open属性,即使没有点击行为的发生,我们内容也会收起。
如果缺省
标签如果缺省,则
元素会在内部自动创建一个
内容,默认的文案是“详细信息”。如下HTML代码:
如果<summary>缺省,则会自动补上,文案是“详细信息”。
结果如下截图所示:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13388.jpg)
二、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怎么实现各种交互效果](/upload/otherpic70/13389.jpg)
当我们点击摘要标题升起的时候,表现为下图(截自Firefox):
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13390.jpg)
而实际上实际开发的时候,对小三角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怎么实现各种交互效果](/upload/otherpic70/13391.jpg)
收起时候:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13392.jpg)
最后有一点需要注意一下,就是如果
标签内并没有元素,则我们的对三角的自定义代码都是无效的,可以使用一个空的元素占位,类似这样:
内容。
三、Chrome浏览器下点击时候outline轮廓等体验处理
UI可以定制了,但是还有个不容忽视的体验问题,那就是在Chrome浏览器下点击时候会出现outline轮廓,如下图所示:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13393.jpg)
在实际项目开发的时候,产品和设计一定会让你把这个效果去掉的。以及,当我们
元素点击较快的时候,文本会被选中,也不是我们想看到的。阻止文本选中,我们可以:
summary {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
对于outline轮廓,比较直接的做法是:
summary {
outline: 0;
}
但是这样处理对无障碍访问而是非常不友好的,那有没有什么办法兼顾视觉体验和无障碍访问体验呢?
我的做法是这样子的:
浏览器对标签元素的outline轮廓进行了专门的体验优化处理,鼠标点击的时候不显示轮廓,键盘访问时候显示轮廓。于是我们可采用李代桃僵策略,让
元素的outline交给元素,方法就是在中再内嵌一个,同时通过tabindex属性remove掉原本的可访问性。HTML代码示意如下:
CSS如下:
summary {
user-select: none;
outline: 0;
}
summary a {
color: inherit;
}
此时,在Chrome浏览器下,我们点击摘要信息,没有任何outline
轮廓出现;但是当我们使用Tab键索引时候,可以看到下图所示的轮廓效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13394.jpg)
轮廓区域比原生的
要小,但这无伤大雅,而且实际项目开发的时候,我们会去掉小箭头,此时只要设置标签display:block,则轮廓就可以和保持一致了。接下来,我们按下Space空格键,就会发现
元素内的内容信息不断的展开与收起:![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13395.jpg)
然后上面实现并不完美,相比原生的
元素,Enter回车键展开收起效果丢失了。这是因为HTML元素中如果多个focusable同时带click浏览器行为元素嵌套的时候,点击里面的元素,外部元素的浏览器行为是不会触发的。类似的有
标签。对于
标签,其浏览器行为只能通过回车键触发,空格键是无效的;但是对于
,回车键和空格键都能触发展开收起行为,这就是为什么上面代码空格键有效,回车键无效的原因。如果想要同时支持回车键展开与收起,可以对HTML如下处理:
需要注意的是上面处理在
自己额外绑定click事件时候可能会有double触发的问题,此时,阻止元素的冒泡即可。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怎么实现各种交互效果](/upload/otherpic70/13396.jpg)
每每看到如此极致的用户体验处理,心情都大好。
原理:
关键是全局监听keydown事件,如果有发生,则认为此100毫秒内的页面focus行为均是键盘产生,从而有效区分是点击触发的focus行为还是键盘触发的focus行为,如果是键盘触发,给
元素手动增加outline效果。四、基于details元素行为的各种交互效果案例
了解了
元素的点击交互行为;解决了UI定制难题;解决了outline的体验问题,下面我们就可以付诸实践,不借助任何JS来实现各种我们平常见到的交互效果。案例1:“更多”展开与收起效果
实现最终效果如下gif:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13400.jpg)
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
小三角图形的隐喻是:我是可点击的,点击我可能会出现宝箱。
OK,我们不妨就点击一下,结果如下图:
具体描述为:
原本隐藏的
标签显示出来了;
标签前面的小三角方向朝下了;
此时我们再一次点击,
标签内容又会隐藏收起,箭头方向还原,如下图:
活脱脱一个天然的展开收起效果。
展开与收起是通过open属性控制的
通过在
这是摘要2
这里<details>标签设置了HTML布尔属性open,因此,默认是展开状态。
结果如下截图:
如果我们使用JS脚本手动移除这个open属性,即使没有点击行为的发生,我们内容也会收起。
如果缺省
标签如果缺省,则
元素会在内部自动创建一个
内容,默认的文案是“详细信息”。如下HTML代码:
如果<summary>缺省,则会自动补上,文案是“详细信息”。
结果如下截图所示:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13388.jpg)
二、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怎么实现各种交互效果](/upload/otherpic70/13389.jpg)
当我们点击摘要标题升起的时候,表现为下图(截自Firefox):
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13390.jpg)
而实际上实际开发的时候,对小三角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怎么实现各种交互效果](/upload/otherpic70/13391.jpg)
收起时候:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13392.jpg)
最后有一点需要注意一下,就是如果
标签内并没有元素,则我们的对三角的自定义代码都是无效的,可以使用一个空的元素占位,类似这样:
内容。
三、Chrome浏览器下点击时候outline轮廓等体验处理
UI可以定制了,但是还有个不容忽视的体验问题,那就是在Chrome浏览器下点击时候会出现outline轮廓,如下图所示:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13393.jpg)
在实际项目开发的时候,产品和设计一定会让你把这个效果去掉的。以及,当我们
元素点击较快的时候,文本会被选中,也不是我们想看到的。阻止文本选中,我们可以:
summary {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
对于outline轮廓,比较直接的做法是:
summary {
outline: 0;
}
但是这样处理对无障碍访问而是非常不友好的,那有没有什么办法兼顾视觉体验和无障碍访问体验呢?
我的做法是这样子的:
浏览器对标签元素的outline轮廓进行了专门的体验优化处理,鼠标点击的时候不显示轮廓,键盘访问时候显示轮廓。于是我们可采用李代桃僵策略,让
元素的outline交给元素,方法就是在中再内嵌一个,同时通过tabindex属性remove掉原本的可访问性。HTML代码示意如下:
CSS如下:
summary {
user-select: none;
outline: 0;
}
summary a {
color: inherit;
}
此时,在Chrome浏览器下,我们点击摘要信息,没有任何outline
轮廓出现;但是当我们使用Tab键索引时候,可以看到下图所示的轮廓效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13394.jpg)
轮廓区域比原生的
要小,但这无伤大雅,而且实际项目开发的时候,我们会去掉小箭头,此时只要设置标签display:block,则轮廓就可以和保持一致了。接下来,我们按下Space空格键,就会发现
元素内的内容信息不断的展开与收起:![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13395.jpg)
然后上面实现并不完美,相比原生的
元素,Enter回车键展开收起效果丢失了。这是因为HTML元素中如果多个focusable同时带click浏览器行为元素嵌套的时候,点击里面的元素,外部元素的浏览器行为是不会触发的。类似的有
标签。对于
标签,其浏览器行为只能通过回车键触发,空格键是无效的;但是对于
,回车键和空格键都能触发展开收起行为,这就是为什么上面代码空格键有效,回车键无效的原因。如果想要同时支持回车键展开与收起,可以对HTML如下处理:
需要注意的是上面处理在
自己额外绑定click事件时候可能会有double触发的问题,此时,阻止元素的冒泡即可。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怎么实现各种交互效果](/upload/otherpic70/13396.jpg)
每每看到如此极致的用户体验处理,心情都大好。
原理:
关键是全局监听keydown事件,如果有发生,则认为此100毫秒内的页面focus行为均是键盘产生,从而有效区分是点击触发的focus行为还是键盘触发的focus行为,如果是键盘触发,给
元素手动增加outline效果。四、基于details元素行为的各种交互效果案例
了解了
元素的点击交互行为;解决了UI定制难题;解决了outline的体验问题,下面我们就可以付诸实践,不借助任何JS来实现各种我们平常见到的交互效果。案例1:“更多”展开与收起效果
实现最终效果如下gif:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13400.jpg)
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
元素会在内部自动创建一个
内容,默认的文案是“详细信息”。如下HTML代码:
如果<summary>缺省,则会自动补上,文案是“详细信息”。
结果如下截图所示:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13388.jpg)
二、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怎么实现各种交互效果](/upload/otherpic70/13389.jpg)
当我们点击摘要标题升起的时候,表现为下图(截自Firefox):
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13390.jpg)
而实际上实际开发的时候,对小三角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怎么实现各种交互效果](/upload/otherpic70/13391.jpg)
收起时候:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13392.jpg)
最后有一点需要注意一下,就是如果
标签内并没有元素,则我们的对三角的自定义代码都是无效的,可以使用一个空的元素占位,类似这样:
内容。
三、Chrome浏览器下点击时候outline轮廓等体验处理
UI可以定制了,但是还有个不容忽视的体验问题,那就是在Chrome浏览器下点击时候会出现outline轮廓,如下图所示:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13393.jpg)
在实际项目开发的时候,产品和设计一定会让你把这个效果去掉的。以及,当我们
元素点击较快的时候,文本会被选中,也不是我们想看到的。阻止文本选中,我们可以:
summary {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
对于outline轮廓,比较直接的做法是:
summary {
outline: 0;
}
但是这样处理对无障碍访问而是非常不友好的,那有没有什么办法兼顾视觉体验和无障碍访问体验呢?
我的做法是这样子的:
浏览器对标签元素的outline轮廓进行了专门的体验优化处理,鼠标点击的时候不显示轮廓,键盘访问时候显示轮廓。于是我们可采用李代桃僵策略,让
元素的outline交给元素,方法就是在中再内嵌一个,同时通过tabindex属性remove掉原本的可访问性。HTML代码示意如下:
CSS如下:
summary {
user-select: none;
outline: 0;
}
summary a {
color: inherit;
}
此时,在Chrome浏览器下,我们点击摘要信息,没有任何outline
轮廓出现;但是当我们使用Tab键索引时候,可以看到下图所示的轮廓效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13394.jpg)
轮廓区域比原生的
要小,但这无伤大雅,而且实际项目开发的时候,我们会去掉小箭头,此时只要设置标签display:block,则轮廓就可以和保持一致了。接下来,我们按下Space空格键,就会发现
元素内的内容信息不断的展开与收起:![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13395.jpg)
然后上面实现并不完美,相比原生的
元素,Enter回车键展开收起效果丢失了。这是因为HTML元素中如果多个focusable同时带click浏览器行为元素嵌套的时候,点击里面的元素,外部元素的浏览器行为是不会触发的。类似的有
标签。对于
标签,其浏览器行为只能通过回车键触发,空格键是无效的;但是对于
,回车键和空格键都能触发展开收起行为,这就是为什么上面代码空格键有效,回车键无效的原因。如果想要同时支持回车键展开与收起,可以对HTML如下处理:
需要注意的是上面处理在
自己额外绑定click事件时候可能会有double触发的问题,此时,阻止元素的冒泡即可。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怎么实现各种交互效果](/upload/otherpic70/13396.jpg)
每每看到如此极致的用户体验处理,心情都大好。
原理:
关键是全局监听keydown事件,如果有发生,则认为此100毫秒内的页面focus行为均是键盘产生,从而有效区分是点击触发的focus行为还是键盘触发的focus行为,如果是键盘触发,给
元素手动增加outline效果。四、基于details元素行为的各种交互效果案例
了解了
元素的点击交互行为;解决了UI定制难题;解决了outline的体验问题,下面我们就可以付诸实践,不借助任何JS来实现各种我们平常见到的交互效果。案例1:“更多”展开与收起效果
实现最终效果如下gif:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13400.jpg)
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
如果<summary>缺省,则会自动补上,文案是“详细信息”。
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13388.jpg)
案例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; }
结果如下图所示:
当我们点击摘要标题升起的时候,表现为下图(截自Firefox):
而实际上实际开发的时候,对小三角UI更便捷的定制方法是:隐藏浏览器原生的小三角,然后借助::before或::after伪元素重新生成我们想要的UI效果,下面这个案例就将展示相关的处理。
案例2:隐藏浏览器原生的小三角并使用自定义三角替换
HTML结构还是类似的:
这是示例2
本案例隐藏原生小三角,使用自定义小三角。
CSS主要分为2部分,一部分是隐藏浏览器原生的小三角,另外一部分是使用伪元素生成自定义的三角效果。
首先看一下隐藏
/* 隐藏默认三角 */ .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); }
最终效果如下图所示:
收起时候:
最后有一点需要注意一下,就是如果
元素,则我们的对三角的自定义代码都是无效的,可以使用一个空的元素占位,类似这样:
内容。
三、Chrome浏览器下点击时候outline轮廓等体验处理
UI可以定制了,但是还有个不容忽视的体验问题,那就是在Chrome浏览器下点击时候会出现outline轮廓,如下图所示:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13393.jpg)
在实际项目开发的时候,产品和设计一定会让你把这个效果去掉的。以及,当我们
元素点击较快的时候,文本会被选中,也不是我们想看到的。阻止文本选中,我们可以:
summary {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
对于outline轮廓,比较直接的做法是:
summary {
outline: 0;
}
但是这样处理对无障碍访问而是非常不友好的,那有没有什么办法兼顾视觉体验和无障碍访问体验呢?
我的做法是这样子的:
浏览器对标签元素的outline轮廓进行了专门的体验优化处理,鼠标点击的时候不显示轮廓,键盘访问时候显示轮廓。于是我们可采用李代桃僵策略,让
元素的outline交给元素,方法就是在中再内嵌一个,同时通过tabindex属性remove掉原本的可访问性。HTML代码示意如下:
CSS如下:
summary {
user-select: none;
outline: 0;
}
summary a {
color: inherit;
}
此时,在Chrome浏览器下,我们点击摘要信息,没有任何outline
轮廓出现;但是当我们使用Tab键索引时候,可以看到下图所示的轮廓效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13394.jpg)
轮廓区域比原生的
要小,但这无伤大雅,而且实际项目开发的时候,我们会去掉小箭头,此时只要设置标签display:block,则轮廓就可以和保持一致了。接下来,我们按下Space空格键,就会发现
元素内的内容信息不断的展开与收起:![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13395.jpg)
然后上面实现并不完美,相比原生的
元素,Enter回车键展开收起效果丢失了。这是因为HTML元素中如果多个focusable同时带click浏览器行为元素嵌套的时候,点击里面的元素,外部元素的浏览器行为是不会触发的。类似的有
标签。对于
标签,其浏览器行为只能通过回车键触发,空格键是无效的;但是对于
,回车键和空格键都能触发展开收起行为,这就是为什么上面代码空格键有效,回车键无效的原因。如果想要同时支持回车键展开与收起,可以对HTML如下处理:
需要注意的是上面处理在
自己额外绑定click事件时候可能会有double触发的问题,此时,阻止元素的冒泡即可。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怎么实现各种交互效果](/upload/otherpic70/13396.jpg)
每每看到如此极致的用户体验处理,心情都大好。
原理:
关键是全局监听keydown事件,如果有发生,则认为此100毫秒内的页面focus行为均是键盘产生,从而有效区分是点击触发的focus行为还是键盘触发的focus行为,如果是键盘触发,给
元素手动增加outline效果。四、基于details元素行为的各种交互效果案例
了解了
元素的点击交互行为;解决了UI定制难题;解决了outline的体验问题,下面我们就可以付诸实践,不借助任何JS来实现各种我们平常见到的交互效果。案例1:“更多”展开与收起效果
实现最终效果如下gif:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13400.jpg)
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
内容。
三、Chrome浏览器下点击时候outline轮廓等体验处理
UI可以定制了,但是还有个不容忽视的体验问题,那就是在Chrome浏览器下点击时候会出现outline轮廓,如下图所示:
在实际项目开发的时候,产品和设计一定会让你把这个效果去掉的。以及,当我们
元素点击较快的时候,文本会被选中,也不是我们想看到的。阻止文本选中,我们可以:
summary {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
对于outline轮廓,比较直接的做法是:
summary {
outline: 0;
}
但是这样处理对无障碍访问而是非常不友好的,那有没有什么办法兼顾视觉体验和无障碍访问体验呢?
我的做法是这样子的:
浏览器对标签元素的outline轮廓进行了专门的体验优化处理,鼠标点击的时候不显示轮廓,键盘访问时候显示轮廓。于是我们可采用李代桃僵策略,让
元素的outline交给元素,方法就是在中再内嵌一个,同时通过tabindex属性remove掉原本的可访问性。HTML代码示意如下:
CSS如下:
summary {
user-select: none;
outline: 0;
}
summary a {
color: inherit;
}
此时,在Chrome浏览器下,我们点击摘要信息,没有任何outline
轮廓出现;但是当我们使用Tab键索引时候,可以看到下图所示的轮廓效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13394.jpg)
轮廓区域比原生的
要小,但这无伤大雅,而且实际项目开发的时候,我们会去掉小箭头,此时只要设置标签display:block,则轮廓就可以和保持一致了。接下来,我们按下Space空格键,就会发现
元素内的内容信息不断的展开与收起:![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13395.jpg)
然后上面实现并不完美,相比原生的
元素,Enter回车键展开收起效果丢失了。这是因为HTML元素中如果多个focusable同时带click浏览器行为元素嵌套的时候,点击里面的元素,外部元素的浏览器行为是不会触发的。类似的有
标签。对于
标签,其浏览器行为只能通过回车键触发,空格键是无效的;但是对于
,回车键和空格键都能触发展开收起行为,这就是为什么上面代码空格键有效,回车键无效的原因。如果想要同时支持回车键展开与收起,可以对HTML如下处理:
需要注意的是上面处理在
自己额外绑定click事件时候可能会有double触发的问题,此时,阻止元素的冒泡即可。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怎么实现各种交互效果](/upload/otherpic70/13396.jpg)
每每看到如此极致的用户体验处理,心情都大好。
原理:
关键是全局监听keydown事件,如果有发生,则认为此100毫秒内的页面focus行为均是键盘产生,从而有效区分是点击触发的focus行为还是键盘触发的focus行为,如果是键盘触发,给
元素手动增加outline效果。四、基于details元素行为的各种交互效果案例
了解了
元素的点击交互行为;解决了UI定制难题;解决了outline的体验问题,下面我们就可以付诸实践,不借助任何JS来实现各种我们平常见到的交互效果。案例1:“更多”展开与收起效果
实现最终效果如下gif:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13400.jpg)
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
中再内嵌一个,同时通过tabindex属性remove掉原本的可访问性。HTML代码示意如下:
CSS如下:
summary {
user-select: none;
outline: 0;
}
summary a {
color: inherit;
}
此时,在Chrome浏览器下,我们点击摘要信息,没有任何outline
轮廓出现;但是当我们使用Tab键索引时候,可以看到下图所示的轮廓效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13394.jpg)
轮廓区域比原生的
要小,但这无伤大雅,而且实际项目开发的时候,我们会去掉小箭头,此时只要设置标签display:block,则轮廓就可以和保持一致了。接下来,我们按下Space空格键,就会发现
元素内的内容信息不断的展开与收起:![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13395.jpg)
然后上面实现并不完美,相比原生的
元素,Enter回车键展开收起效果丢失了。这是因为HTML元素中如果多个focusable同时带click浏览器行为元素嵌套的时候,点击里面的元素,外部元素的浏览器行为是不会触发的。类似的有
标签。对于
标签,其浏览器行为只能通过回车键触发,空格键是无效的;但是对于
,回车键和空格键都能触发展开收起行为,这就是为什么上面代码空格键有效,回车键无效的原因。如果想要同时支持回车键展开与收起,可以对HTML如下处理:
需要注意的是上面处理在
自己额外绑定click事件时候可能会有double触发的问题,此时,阻止元素的冒泡即可。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怎么实现各种交互效果](/upload/otherpic70/13396.jpg)
每每看到如此极致的用户体验处理,心情都大好。
原理:
关键是全局监听keydown事件,如果有发生,则认为此100毫秒内的页面focus行为均是键盘产生,从而有效区分是点击触发的focus行为还是键盘触发的focus行为,如果是键盘触发,给
元素手动增加outline效果。四、基于details元素行为的各种交互效果案例
了解了
元素的点击交互行为;解决了UI定制难题;解决了outline的体验问题,下面我们就可以付诸实践,不借助任何JS来实现各种我们平常见到的交互效果。案例1:“更多”展开与收起效果
实现最终效果如下gif:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13400.jpg)
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
CSS如下:
summary { user-select: none; outline: 0; } summary a { color: inherit; }
此时,在Chrome浏览器下,我们点击摘要信息,没有任何outline
轮廓出现;但是当我们使用Tab键索引时候,可以看到下图所示的轮廓效果:
轮廓区域比原生的
要小,但这无伤大雅,而且实际项目开发的时候,我们会去掉小箭头,此时只要设置标签display:block,则轮廓就可以和保持一致了。接下来,我们按下Space空格键,就会发现
元素内的内容信息不断的展开与收起:![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13395.jpg)
然后上面实现并不完美,相比原生的
元素,Enter回车键展开收起效果丢失了。这是因为HTML元素中如果多个focusable同时带click浏览器行为元素嵌套的时候,点击里面的元素,外部元素的浏览器行为是不会触发的。类似的有
标签。对于
标签,其浏览器行为只能通过回车键触发,空格键是无效的;但是对于
,回车键和空格键都能触发展开收起行为,这就是为什么上面代码空格键有效,回车键无效的原因。如果想要同时支持回车键展开与收起,可以对HTML如下处理:
需要注意的是上面处理在
自己额外绑定click事件时候可能会有double触发的问题,此时,阻止元素的冒泡即可。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怎么实现各种交互效果](/upload/otherpic70/13396.jpg)
每每看到如此极致的用户体验处理,心情都大好。
原理:
关键是全局监听keydown事件,如果有发生,则认为此100毫秒内的页面focus行为均是键盘产生,从而有效区分是点击触发的focus行为还是键盘触发的focus行为,如果是键盘触发,给
元素手动增加outline效果。四、基于details元素行为的各种交互效果案例
了解了
元素的点击交互行为;解决了UI定制难题;解决了outline的体验问题,下面我们就可以付诸实践,不借助任何JS来实现各种我们平常见到的交互效果。案例1:“更多”展开与收起效果
实现最终效果如下gif:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13400.jpg)
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
接下来,我们按下Space空格键,就会发现
然后上面实现并不完美,相比原生的
元素,Enter回车键展开收起效果丢失了。这是因为HTML元素中如果多个focusable同时带click浏览器行为元素嵌套的时候,点击里面的元素,外部元素的浏览器行为是不会触发的。类似的有
标签。对于
标签,其浏览器行为只能通过回车键触发,空格键是无效的;但是对于
,回车键和空格键都能触发展开收起行为,这就是为什么上面代码空格键有效,回车键无效的原因。如果想要同时支持回车键展开与收起,可以对HTML如下处理:
需要注意的是上面处理在
自己额外绑定click事件时候可能会有double触发的问题,此时,阻止元素的冒泡即可。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怎么实现各种交互效果](/upload/otherpic70/13396.jpg)
每每看到如此极致的用户体验处理,心情都大好。
原理:
关键是全局监听keydown事件,如果有发生,则认为此100毫秒内的页面focus行为均是键盘产生,从而有效区分是点击触发的focus行为还是键盘触发的focus行为,如果是键盘触发,给
元素手动增加outline效果。四、基于details元素行为的各种交互效果案例
了解了
元素的点击交互行为;解决了UI定制难题;解决了outline的体验问题,下面我们就可以付诸实践,不借助任何JS来实现各种我们平常见到的交互效果。案例1:“更多”展开与收起效果
实现最终效果如下gif:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13400.jpg)
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
标签,其浏览器行为只能通过回车键触发,空格键是无效的;但是对于
如果想要同时支持回车键展开与收起,可以对HTML如下处理:
需要注意的是上面处理在
自己额外绑定click事件时候可能会有double触发的问题,此时,阻止元素的冒泡即可。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怎么实现各种交互效果](/upload/otherpic70/13396.jpg)
每每看到如此极致的用户体验处理,心情都大好。
原理:
关键是全局监听keydown事件,如果有发生,则认为此100毫秒内的页面focus行为均是键盘产生,从而有效区分是点击触发的focus行为还是键盘触发的focus行为,如果是键盘触发,给
元素手动增加outline效果。四、基于details元素行为的各种交互效果案例
了解了
元素的点击交互行为;解决了UI定制难题;解决了outline的体验问题,下面我们就可以付诸实践,不借助任何JS来实现各种我们平常见到的交互效果。案例1:“更多”展开与收起效果
实现最终效果如下gif:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13400.jpg)
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
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怎么实现各种交互效果](/upload/otherpic70/13396.jpg)
每每看到如此极致的用户体验处理,心情都大好。
原理:
关键是全局监听keydown事件,如果有发生,则认为此100毫秒内的页面focus行为均是键盘产生,从而有效区分是点击触发的focus行为还是键盘触发的focus行为,如果是键盘触发,给
元素手动增加outline效果。四、基于details元素行为的各种交互效果案例
了解了
元素的点击交互行为;解决了UI定制难题;解决了outline的体验问题,下面我们就可以付诸实践,不借助任何JS来实现各种我们平常见到的交互效果。案例1:“更多”展开与收起效果
实现最终效果如下gif:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13400.jpg)
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
例如下图就是键盘Tab键focus
后回车后的效果:
每每看到如此极致的用户体验处理,心情都大好。
原理:
关键是全局监听keydown事件,如果有发生,则认为此100毫秒内的页面focus行为均是键盘产生,从而有效区分是点击触发的focus行为还是键盘触发的focus行为,如果是键盘触发,给
元素手动增加outline效果。四、基于details元素行为的各种交互效果案例
了解了
元素的点击交互行为;解决了UI定制难题;解决了outline的体验问题,下面我们就可以付诸实践,不借助任何JS来实现各种我们平常见到的交互效果。案例1:“更多”展开与收起效果
实现最终效果如下gif:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13400.jpg)
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
案例1:“更多”展开与收起效果
实现最终效果如下gif:
因为“更多”元素是在底部,因此效果实现的要点的所有的内容信息都放在
元素内部,然后通过元素的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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
元素内置行为就搞定了。案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13405.jpg)
这个更加简单了,就是一堆
元素并排放置就可以了,如下HTML:
关注中心
关注的商品
...
...
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
![利用HTML5的details, summary怎么实现各种交互效果](/upload/otherpic70/13408.jpg)
此效果实现原理核心是[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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
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实现点击显示悬浮菜单,自定义下拉框等效果
然后CSS让.box元素绝对定位即可,显示和隐藏
案例3:accordion多项折叠效果
此效果常见于条目比较多的垂直导航栏,新闻条目等。
例如下面实现的效果:
这个更加简单了,就是一堆
关注中心 关注的商品 ......
计算CSS没有任何设置,效果也天然达成。
案例3中的展开项显示的时候是非常生硬的突然显示,实际上我们可以借助一些选择器技巧以及CSS3 transition
属性让菜单展开收起的时候是有动画效果的,效果如下gif截图:
此效果实现原理核心是[open]
属性选择器,和加号+
相邻兄弟选择器。
首先看下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怎么实现各种交互效果](/upload/otherpic70/13409.jpg)
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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
details + dl { max-height: 0; transition: max-height .25s; overflow: hidden; } [open] + dl { max-height: 100px; }
借助相邻兄弟选择器以及max-height任意元素slideUp/slideDown技术就可以效果达成。
案例5:多级嵌套的树形菜单交互效果
这里的树形菜单效果实现也很简单,多个
HTML结构大致如下:
我的视频
爆肝工程师的异世界狂想曲
tv1-720p.mp4tv2-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怎么实现各种交互效果](/upload/otherpic70/13410.jpg)
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
元素的棒棒哒特性,我们可以对其进行Polyfill对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
元素的脚本可能对你有用:var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html
2.设置CSS:
summary { outline: 0; pointer-events: none; }
这样就不能点,也不会有outline轮廓。
六、兼容性以及Polyfill
兼容性如下图:
除了IE和Edge浏览器,大好河山一片绿,至少移动端可以用得比较开心。
如果想要在桌面web网页使用
对键盘访问,事件toggle都做了兼容。
如果开发策略是对不支持的IE进行特异处理,则下面的JS判断是否支持
var isSupportDetails = 'open' in document.createElement('details');
最后,无JS实现的好处有:
省了代码,加载快了;
实现更简单了,开发快了;
JS还没加载交互也能进行,体验好了;
键盘无障碍和aria阅读设备无障碍天然支持,体验档次高了。
关于利用HTML5的details, summary怎么实现各种交互效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:利用HTML5的details,summary怎么实现各种交互效果
分享链接:http://myzitong.com/article/psdocs.html