原生JS手风琴点击其他项时按钮文本无法重置为Open如何解决

问题根因 #

原有代码仅处理了当前点击项的按钮文本切换，在关闭其余已展开手风琴项时，没有同步重置对应项的按钮文本，因此出现已关闭面板的按钮仍显示「Close」的异常。

修复代码 #

仅需修改JS逻辑即可，在遍历关闭其余项的步骤中新增重置按钮文本的逻辑，优化后的完整代码如下：

document.addEventListener("DOMContentLoaded", function(event) {
    const accordionItems = document.querySelectorAll('.acc__item');

    accordionItems.forEach((acc) => {
        const btns = acc.querySelectorAll('.acc__button')
        btns.forEach(btn => {
            btn.addEventListener("click", () => {
                // 统一关闭其余所有项并重置按钮文本
                accordionItems.forEach((item) => {
                    if (item !== acc) {
                        item.classList.remove("open");
                        item.querySelector('.acc__button').innerHTML = "Open";
                    }
                });
                // 切换当前项状态并同步按钮文本
                acc.classList.toggle("open");
                btn.innerHTML = acc.classList.contains('open') ? "Close" : "Open";
            });
        });
    });  
});

调整后同时简化了原有的按钮文本判断逻辑，代码可读性更高，所有场景下的按钮文本都能和面板展开状态保持一致。

内容的提问来源于stack exchange，提问作者Лео