JavaScript中怎么实现各种交互效果

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

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

含slideup/slidedown动画的展开与收起

此效果实现原理核心是[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如下：

树形菜单展开gif效果截图

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

兼容性如下图：

detailas兼容性

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

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

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

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

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

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

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

看完上述内容，你们对JavaScript中怎么实现各种交互效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

文章题目：JavaScript中怎么实现各种交互效果
浏览路径：http://wjwzjz.com/article/gcpiei.html