JavaScript toggle类功能失效：存在remove操作时点击当前元素无法关闭

问题根因 #

你的代码执行逻辑顺序错误：
每次触发点击事件时，你会先统一移除所有box的active类，此时你点击的目标box就算之前处于激活状态，也已经被清空了active类。后续调用toggle方法时，只会触发「添加active类」的逻辑，永远不会执行移除操作，所以点击同一个已激活的box无法收起内容。

修复代码 #

只需要先记录当前点击box的激活状态，再做全局移除，最后根据提前记录的状态判断是否要激活当前元素即可：

let faqs = document.querySelectorAll(".allsector .box");

faqs.forEach((faq) => {
    faq.addEventListener("click", function (e) {
        // 先记录当前点击的box是否已经处于激活状态
        const isCurrentActive = faq.classList.contains("active");
        // 全局移除所有active类
        faqs.forEach((ele) => {
            ele.classList.remove("active");
        });
        // 如果之前没激活，现在就加上；如果之前已经激活，现在已经移除了就不用再加，实现收起效果
        if (!isCurrentActive) {
            faq.classList.add("active");
        }
    });
});

修改后可以完全满足你的需求：

• 点击未激活的box：自动关闭其他已激活box，展开当前box内容
• 点击已激活的box：直接收起当前box内容

内容的提问来源于stack exchange，提问作者Mohamad