js 实现 slidetoggle

使用 jQuery 实现 SlideToggle

jQuery 提供了内置的 slideToggle() 方法，可以轻松实现元素的滑动显示/隐藏效果。

$("#element").slideToggle(duration, easing, callback);

• duration：动画持续时间（毫秒），可选，默认值为 400。
• easing：动画缓动效果，可选，默认值为 "swing"。
• callback：动画完成后的回调函数，可选。

示例代码：

$("#toggleButton").click(function() {
    $("#content").slideToggle();
});

使用纯 JavaScript 实现 SlideToggle

纯 JavaScript 可以通过操作 CSS 的 height 和 transition 属性来实现类似效果。

function slideToggle(element, duration = 400) {
    if (window.getComputedStyle(element).display === "none") {
        element.style.display = "block";
        element.style.height = "0";
        setTimeout(() => {
            element.style.height = element.scrollHeight + "px";
        }, 10);
    } else {
        element.style.height = element.scrollHeight + "px";
        setTimeout(() => {
            element.style.height = "0";
        }, 10);
        setTimeout(() => {
            element.style.display = "none";
        }, duration);
    }
    element.style.transition = `height ${duration}ms ease-in-out`;
    element.style.overflow = "hidden";
}

使用方法：

document.getElementById("toggleButton").addEventListener("click", function() {
    slideToggle(document.getElementById("content"));
});

使用 CSS 类切换实现 SlideToggle

结合 CSS 动画和 JavaScript 类切换，可以实现更流畅的 SlideToggle 效果。

CSS 部分：

.slide-container {
    overflow: hidden;
    transition: height 0.4s ease-in-out;
}
.slide-closed {
    height: 0 !important;
}

JavaScript 部分：

function slideToggle(element) {
    if (element.classList.contains("slide-closed")) {
        element.style.height = element.scrollHeight + "px";
        element.classList.remove("slide-closed");
        setTimeout(() => {
            element.style.height = "";
        }, 400);
    } else {
        element.style.height = element.scrollHeight + "px";
        setTimeout(() => {
            element.classList.add("slide-closed");
        }, 10);
    }
}

使用 Web Animations API 实现

现代浏览器支持 Web Animations API，可以创建更高效的动画效果。

function slideToggle(element, duration = 400) {
    if (element.getAnimations().some(a => a.playState === "running")) return;

    const isHidden = element.offsetHeight === 0;
    const endHeight = isHidden ? element.scrollHeight : 0;

    element.style.overflow = "hidden";
    element.animate(
        { height: [`${element.offsetHeight}px`, `${endHeight}px`] },
        { duration, easing: "ease-in-out" }
    ).onfinish = () => {
        element.style.height = isHidden ? "" : "0";
    };
}

注意事项

• 确保元素初始状态正确设置，隐藏时应设置 display: none 或 height: 0。
• 动画过程中可能需要处理 overflow 属性以防止内容溢出。
• 对于动态内容，在内容变化后可能需要重新计算高度。
• 考虑添加动画取消逻辑，防止快速连续点击导致动画混乱。