今天就跟大家聊聊有关JavaScript中怎么实现各种交互效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
成都创新互联专注于企业全网营销推广、网站重做改版、巴青网站定制设计、自适应品牌网站建设、H5页面制作、商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为巴青等各大城市提供网站开发制作服务。
一、了解HTML5 details, summary默认交互行为
这是摘要1
这里具体描述，标签相对随意，例如这里使用的<p>标签。
结果UI表现为：
details标签默认效果截图
具体描述为：
只显示了
小三角图形的隐喻是：我是可点击的，点击我可能会出现宝箱。
OK，我们不妨就点击一下，结果如下图：
image.png
具体描述为：
原本隐藏的
此时我们再一次点击，
image.png
活脱脱一个天然的展开收起效果。
展开与收起是通过open属性控制的
通过在open属性，可以让我们的详情信息默认就是展开状态，如下HTML示意：
这是摘要2
这里<details>标签设置了HTML布尔属性open，因此，默认是展开状态。
结果如下截图：
open属性下的信息默认展开
如果我们使用JS脚本手动移除这个open属性，即使没有点击行为的发生，我们内容也会收起。
如果缺省
如果<summary>缺省，则会自动补上，文案是“详细信息”。
结果如下截图所示：
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;
}结果如下图所示：
三角位置和颜色示意
当我们点击摘要标题升起的时候，表现为下图（截自Firefox）：
三角收起效果
而实际上实际开发的时候，对小三角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);
}最终效果如下图所示：
自定义三角效果截图
收起时候：
收起时候效果
最后有一点需要注意一下，就是如果
内容。
三、Chrome浏览器下点击时候outline轮廓等体验处理
UI可以定制了，但是还有个不容忽视的体验问题，那就是在Chrome浏览器下点击时候会出现outline轮廓，如下图所示：
Chrome下的outline轮廓
在实际项目开发的时候，产品和设计一定会让你把这个效果去掉的。以及，当我们
阻止文本选中，我们可以：
summary {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}对于outline轮廓，比较直接的做法是：
summary {
outline: 0;
}但是这样处理对无障碍访问而是非常不友好的，那有没有什么办法兼顾视觉体验和无障碍访问体验呢？
我的做法是这样子的：
利用标签的outline交互体验
浏览器对标签元素的outline轮廓进行了专门的体验优化处理，鼠标点击的时候不显示轮廓，键盘访问时候显示轮廓。于是我们可采用李代桃僵策略，让元素的outline交给元素，方法就是在中再内嵌一个，同时通过tabindex属性remove掉原本的可访问性。HTML代码示意如下：
这是示例
点击无外框，键盘focus有。
CSS如下：
summary {
user-select: none;
outline: 0;
}
summary a {
color: inherit;
}此时，在Chrome浏览器下，我们点击摘要信息，没有任何outline轮廓出现；但是当我们使用Tab键索引时候，可以看到下图所示的轮廓效果：
轮廓示意
轮廓区域比原生的display:block，则轮廓就可以和
接下来，我们按下Space空格键，就会发现
收起状态
然后上面实现并不完美，相比原生的元素，Enter回车键展开收起效果丢失了。这是因为HTML元素中如果多个focusable同时带click浏览器行为元素嵌套的时候，点击里面的元素，外部元素的浏览器行为是不会触发的。类似的有
对于标签，其浏览器行为只能通过回车键触发，空格键是无效的；但是对于，回车键和空格键都能触发展开收起行为，这就是为什么上面代码空格键有效，回车键无效的原因。
如果想要同时支持回车键展开与收起，可以对HTML如下处理：
这是示例
点击无外框，键盘focus有。
需要注意的是上面处理在自己额外绑定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后回车后的效果：
键盘访问回车收起后效果截图
每每看到如此极致的用户体验处理，心情都大好。
原理：
关键是全局监听keydown事件，如果有发生，则认为此100毫秒内的页面focus行为均是键盘产生，从而有效区分是点击触发的focus行为还是键盘触发的focus行为，如果是键盘触发，给outline效果。
四、基于details元素行为的各种交互效果案例
了解了outline的体验问题，下面我们就可以付诸实践，不借助任何JS来实现各种我们平常见到的交互效果。
案例1：“更多”展开与收起效果
实现最终效果如下gif：
更多展开收起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;
}
