jQuery slideToggle() 如何实时判断展开或折叠状态？

实时监测jQuery slideToggle() 的展开/折叠状态

$.slideToggle() 方法本身无法直接提供实时展开/折叠状态。本文介绍一种巧妙的方法来解决这个问题。

核心思路：

利用 CSS 类名作为状态标识。当元素展开时，添加特定类名；折叠时，移除该类名。

代码实现：

let statusClass = "expanded"; // 定义状态类名

$(".menu-parent").click(function() {
    const $ul = $(this).next("ul");
    $ul.slideToggle();
    if ($ul.hasClass(statusClass)) {
        $ul.removeClass(statusClass);
        console.log("折叠");
    } else {
        $ul.addClass(statusClass);
        console.log("展开");
    }
});

使用方法示例：

点击切换

点击以上链接，将触发相邻

元素的 slideToggle() 动画，并通过检查 expanded 类名来实时打印展开或折叠状态到控制台。 此方法简洁高效，避免了不必要的复杂逻辑。
来源：1740348304