原生JS点击切换wrapper状态：无法关闭已打开元素的问题求助

你的核心问题是修改后的代码强制每次点击都激活当前元素，忽略了当前元素可能已经处于激活状态需要关闭的情况。只需要在逻辑里加一步判断，就能实现「点击未激活的wrapper时打开它并关闭其他；点击已激活的wrapper时关闭它」的效果。

修改后的完整代码：

const wrapper = document.querySelectorAll(".wrapper");

wrapper.forEach((wrapperElement) => {
    let mapElement = wrapperElement.querySelector(".map");

    wrapperElement.addEventListener('click', function() { 
        // 判断当前元素是否已经处于激活状态
        const isActive = wrapperElement.classList.contains('focus');

        // 先统一移除所有wrapper的激活类
        wrapper.forEach((el) => {
            let map = el.querySelector(".map");
            map.classList.remove('show');
            el.classList.remove('focus');
        });

        // 如果当前元素之前未激活，才添加激活类；否则保持关闭状态
        if (!isActive) {
            mapElement.classList.add('show');
            wrapperElement.classList.add('focus');
        }
    });
});

逻辑说明： #

• 每次点击先执行「全局清除」：把所有wrapper的focus类和对应map的show类移除，确保没有残留的激活状态
• 然后判断当前点击的wrapper是否原本是激活的：
  • 如果是激活状态（isActive为true），就不做后续添加操作，相当于关闭当前元素
  • 如果不是激活状态，就给当前元素添加激活类，实现打开效果

这样既保留了「点击新元素关闭旧元素」的互斥性，又能实现「点击已打开元素关闭它」的切换功能。

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