表格手风琴组件中+/-按钮状态不切换问题求助

问题核心：你的CSS规则.accordion-row.active .accordion-button:after依赖父级<tr class="accordion-row">的active类生效，但当前JS只切换了内容行（.accordion-content）的active类，没给按钮所在的<tr>同步切换状态，导致按钮伪元素的内容无法更新。

修复方案 #

修改JavaScript代码，点击按钮时同时切换按钮所在的.accordion-row的active类：

const accordionButtons = document.querySelectorAll('.accordion-button');

accordionButtons.forEach(button => {
  button.addEventListener('click', () => {
    const accordionRow = button.parentElement.parentElement;
    const contentRow = accordionRow.nextElementSibling;
    // 同时切换父行和内容行的active类
    accordionRow.classList.toggle('active');
    contentRow.classList.toggle('active');
  });
});

补充说明 #

原CSS规则本身没有问题，只要.accordion-row能正确获取到active类，按钮的+/-就会自动切换。如果担心样式优先级问题，可以把基础按钮伪元素的选择器简化，避免冗余嵌套：

.accordion-button:after {
  content: "+";
}

.accordion-row.active .accordion-button:after {
  content: "-";
}

这样调整后，点击按钮时，手风琴的展开收起状态会和按钮的+/-图标完全同步。

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