JavaScript手风琴点击头部部分区域无响应、多实例适配问题求助

修复方案 #

核心修改逻辑 #

• 点击区域适配：原代码仅判断点击目标本身是否为.a-btn，导致内部子元素点击无响应，改用closest()方法向上查找最近的.a-btn元素，即可覆盖整个头部区域的点击事件
• 多实例兼容：优化事件绑定逻辑，避免重复绑定全局监听，每个实例的操作严格限定在自身根元素范围内，不同实例的配置和状态完全隔离互不影响

修复后完整JS代码 #

function initAcc(elem, option){
    // 全局仅绑定一次事件监听，避免重复注册
    if(!window.accListenerBound) {
        document.addEventListener('click', function (e) {
            // 遍历所有已注册的手风琴实例处理事件
            window.accInstances.forEach(instance => {
                const targetBtn = e.target.closest(`${instance.selector} .a-btn`);
                if (!targetBtn) return;

                const parentContainer = targetBtn.parentElement;
                // 仅处理当前实例范围内的元素
                if (!parentContainer.closest(instance.selector)) return;

                if (!parentContainer.classList.contains('active')) {
                    if (instance.option === true) {
                        // 仅关闭当前实例内的其他展开项，不影响其他实例
                        const allContainers = document.querySelectorAll(`${instance.selector} .a-container`);
                        allContainers.forEach(el => el.classList.remove('active'));
                    }
                    parentContainer.classList.add('active');
                } else {
                    parentContainer.classList.remove('active');
                }
            });
        });
        window.accListenerBound = true;
        window.accInstances = [];
    }
    // 注册当前手风琴实例
    window.accInstances.push({
        selector: elem,
        option: option
    });
}

// 多实例调用示例
// initAcc('.accordion-v1', true); // 实例1：开启手风琴模式，同一时间仅展开一项
// initAcc('.accordion-v2', false); // 实例2：允许多项同时展开

生效说明 #

原有HTML、CSS代码无需任何调整，仅替换JS部分的initAcc函数逻辑即可。

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