时间戳

首页 > 解决方案 > 当我通过 JS 单击按钮时，如何折叠（前后）一个部分？

javascript - 当我通过 JS 单击按钮时，如何折叠（前后）一个部分？

问题描述

我试图通过 JS 理解 DOM。当我单击按钮时（名为全部折叠，我希望下面的部分折叠（消失），但缓慢而平稳（过渡？），然后当我再次单击同一个按钮时，我希望它再次出现，等等......我怎样才能通过JS实现这一点？

我写了这段代码，但仍然不能重复工作，它只工作一次：

btn_all.addEventListener("click", funct1);
function funct1(e) {
section2.style.transition = "all ease 5s";
section2.style.display = "none";
for (let i = 0; i < 100; i++) {
btn_all.addEventListener("click", funct2);
function funct2(e1) {
    section2.style.display = "block";
}
}};

过渡不起作用...

标签： javascript

解决方案

display: none 是即时的 - 您需要更改一些属性（如高度或不透明度），然后在完成后设置 display: none ，并将过渡放在基本样式中。

此外，可访问性指南（和良好的品味）通常规定过渡应该快速 - 给人以运动的印象，而不是让他们坐在动画中。250ms是一个相当不错的速度

例如

.section {
transition: opacity ease-in .25s;
}

.section.fade-out {
opacity: 0;
}

此外，jquery 有一些简单的转换通常可以工作，除非你在样式中变得超级疯狂，如果有的话。例如

$(".section2").fadeOut(250);

它消除了对大量空值检查、浏览器兼容性变通方法等的需求，并且有很多简单的快捷方式。非常适合初学者开发人员的快速开发和易于使用。

推荐阅读