Javascript 手风琴切换图标工作不正常

我试图在我的手风琴上添加减号，以便在单击行后显示

我尝试添加减/加let并尝试为其添加display.style。但它似乎真的有问题，不能正常工作。我怎样才能正确地设置它？它只适用于第一个元素，而不是所有元素

const tabs=document.querySelectorAll（“.faq\uu tab”）.forEach（按钮=>{
按钮。addEventListener（“单击”，（）=>{
const tabsContent=button.nextElementSibling；
button.classList.toggle（'active-faq'）；
让减号=document.querySelector（“.plus”）
让plus=document.querySelector（“.减号”）
if（button.classList.contains（'active-faq'））{
tabsContent.style.maxHeight=tabsContent.scrollHeight+'px'；
plus.style.display='none'；
减.style.display='flex'；
}否则{
tabsContent.style.maxHeight=0；
减.style.display='none'；
plus.style.display='flex'；
}
})
});
.plus{
左侧填充：10px；
}
.减去{
左侧填充：10px；
显示：无；
}
.faq\u面板{
最大高度：0px；
溢出：隐藏；
}
问题
回答者

您可能需要使用
内联flex
而不是
flex
：


const tabs=document.querySelectorAll（“.faq\uu tab”）.forEach（按钮=>{
按钮。addEventListener（“单击”，（）=>{
const tabsContent=button.nextElementSibling；
button.classList.toggle（'active-faq'）；
让减号=button.querySelector（“.plus”）；//而不是使用document button来指向相应的元素
让plus=button.querySelector（“.减号”）；//而不是使用document button来指向相应的元素
if（button.classList.contains（'active-faq'））{
tabsContent.style.maxHeight=tabsContent.scrollHeight+'px'；
减.style.display='none'；
plus.style.display='inline flex'；
}否则{
tabsContent.style.maxHeight=0；
plus.style.display='none'；
减.style.display='inline flex'；
}
})
});
.plus{
左侧填充：10px；
}
.减去{
左侧填充：10px；
显示：无；
}
.faq\u面板{
最大高度：0px；
溢出：隐藏；
}
问题1
答复1

问题2
答复2

问题在于您将图像显示设置为
flex
，或者在css文件中提供按钮
faq\u选项卡
显示：flex
，或者将
显示：内联
设置为图像

if (button.classList.contains('active-faq')) {
  tabsContent.style.maxHeight = tabsContent.scrollHeight + 'px';
   plus.style.display = 'none';
  minus.style.display = 'inline';
} else {
  tabsContent.style.maxHeight = 0;
  minus.style.display = 'none';
  plus.style.display = 'inline';
}

仍然不起作用。我缺少一个常见问题解答面板的css样式，你能再次看到原始帖子吗？仍然不起作用，因为在第一次单击后，它仍然显示“显示”，此时应该已经有隐藏文本了。@Dave，通过在if/else块中交换隐藏/显示代码块，修复了这个问题，请现在检查：）谢谢，工作正常。现在我还有一个问题，每当我添加更多faq_uu选项卡时，javascript效果只在第一个元素上起作用，你知道为什么吗？@Dave，为此，你需要从当前的
按钮
变量中查找元素（
.plus
，
.plus
）。用另一块更新了答案，请检查：）