Question

我正在努力解决过渡事件，但我无法使其正常工作。

基本上，我想做的是在转换完成后运行content.style.maxHeight = 100%。

我遇到的两个问题是：

代码将同时在if和else语句上运行。
除了第一个名为.aboutCollapsible

CSS类：

.aboutCollapsible {
    font: 16px/24px "Roboto";
    background: #202020;
    text-align: justify;
    margin-bottom: 20px;
    width: 580px;
    max-width: 100%;
    padding: 1px 20px 5px 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

JavaScript

// Collapsible
var coll = document.getElementsByClassName("collapsible");
const el = document.querySelector(".aboutCollapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
            el.addEventListener("transitionend", function () {
                content.style.maxHeight = "100%";
            });
        }
    });
}

Answer 1

我没有运行您的代码，但是只要阅读一下，我就会为您提供一些线索。

1。代码将同时在if和else语句上运行。

if (content.style.maxHeight)测试属性content.style.maxHeight的存在，该属性在您的CSS中设置。因此，即使将其设置为null，也总是如此。您应该尝试类似

if (content.style.maxHeight == '100%')

2。只能用于第一个名为.aboutCollapsible

的类

您应该使用

const el = document.querySelectorAll(".aboutCollapsible");

不仅是仅返回first element的简单querySelector。

在CSS转换完成后使用纯JavaScript运行代码

1 个答案: