Javascript 使用CSS切换内容

我有一个手风琴切换菜单，目前做的不多。你点击它，它就会打开和关闭。但是，我希望它在关闭时显示“+”，在打开时显示“-”。当前，第一个手风琴默认为打开并显示X，第二个手风琴默认为+但除了打开和关闭之外，在单击时不会更改

                <h2 class="accordion-toggle accordion-active">HeaderText</h2>
                <div class="accordion-content default">
                    AccordionText
                </div>

                <h2 class="accordion-toggle">Headertext2</h2>
                <div class="accordion-content">
                    AccordionText2
                </div>
            </div>
      </section>

目前代码看起来像

                <h2 class="accordion-toggle accordion-active">HeaderText</h2>
                <div class="accordion-content default">
                    AccordionText
                </div>

                <h2 class="accordion-toggle">Headertext2</h2>
                <div class="accordion-content">
                    AccordionText2
                </div>
            </div>
      </section>

                <h2 class="accordion-toggle accordion-active">HeaderText</h2>
                <div class="accordion-content default">
                    AccordionText
                </div>

                <h2 class="accordion-toggle">Headertext2</h2>
                <div class="accordion-content">
                    AccordionText2
                </div>
            </div>
      </section>

只有手风琴的js是

                <h2 class="accordion-toggle accordion-active">HeaderText</h2>
                <div class="accordion-content default">
                    AccordionText
                </div>

                <h2 class="accordion-toggle">Headertext2</h2>
                <div class="accordion-content">
                    AccordionText2
                </div>
            </div>
      </section>

 $('#solution-accordion').find('.accordion-toggle').click(function(){
   //Expand or collapse this panel
   $(this).next().slideToggle(500);
   //Hide the other panels
   $(".accordion-content").not($(this).next()).slideUp(500);
 }); 

切换菜单的代码

                <h2 class="accordion-toggle accordion-active">HeaderText</h2>
                <div class="accordion-content default">
                    AccordionText
                </div>

                <h2 class="accordion-toggle">Headertext2</h2>
                <div class="accordion-content">
                    AccordionText2
                </div>
            </div>
      </section>

 // solution page accordion
  $('#solution-accordion').find('.accordion-toggle').click(function(){
  //Expand or collapse this panel
  $(this).next().slideToggle(500);
  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp(500);
  });

这是我为它创作的小提琴

                <h2 class="accordion-toggle accordion-active">HeaderText</h2>
                <div class="accordion-content default">
                    AccordionText
                </div>

                <h2 class="accordion-toggle">Headertext2</h2>
                <div class="accordion-content">
                    AccordionText2
                </div>
            </div>
      </section>

---

我不是这个项目的ui开发人员，我只是负责迁移，但有人指出了这一点，我想为他们解决这个问题。谢谢

在整个过程中，应该只在扩展的手风琴项目上设置“手风琴活动”类。在我看来，它的目的是在折叠时显示“+”，然后在打开时显示“x”。您可以将CSS中的“x”更改为“-”，并删除45度的旋转

                <h2 class="accordion-toggle accordion-active">HeaderText</h2>
                <div class="accordion-content default">
                    AccordionText
                </div>

                <h2 class="accordion-toggle">Headertext2</h2>
                <div class="accordion-content">
                    AccordionText2
                </div>
            </div>
      </section>

不管是哪种方式，我都会先解决他们试图通过增加手风琴活动课来做的事情

                <h2 class="accordion-toggle accordion-active">HeaderText</h2>
                <div class="accordion-content default">
                    AccordionText
                </div>

                <h2 class="accordion-toggle">Headertext2</h2>
                <div class="accordion-content">
                    AccordionText2
                </div>
            </div>
      </section>

添加一个从所有其他元素中移除的类，然后添加它，如果它只是为了被扩展的那个元素

                <h2 class="accordion-toggle accordion-active">HeaderText</h2>
                <div class="accordion-content default">
                    AccordionText
                </div>

                <h2 class="accordion-toggle">Headertext2</h2>
                <div class="accordion-content">
                    AccordionText2
                </div>
            </div>
      </section>

jsfiddle：

                <h2 class="accordion-toggle accordion-active">HeaderText</h2>
                <div class="accordion-content default">
                    AccordionText
                </div>

                <h2 class="accordion-toggle">Headertext2</h2>
                <div class="accordion-content">
                    AccordionText2
                </div>
            </div>
      </section>

---

为什么标记为C#？你能发布处理点击事件的javascript代码吗？发布处理点击事件的JS你的CSS和JS引用的标记不在你的帖子中。“寻求调试帮助的问题（“此代码为什么不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。没有明确问题说明的问题对其他读者没有用。请参阅：如何创建问题。”谢谢Michael，我删除了过多的代码谢谢，我在代码中添加了设置accordion活动的代码，如果这有助于我看到一些“活动”类的切换，但它不在“accordion toggle”类元素上，也不在切换“accordion active”类。也许是因为我不熟悉这个特定的UI组件，但我仍然觉得它没有被很好地切换。你是对的。我相信我找到了一个手风琴切换和编辑我的原始评论。thanks@DanielJ，我已经用代码更新了我上面的答案，如果你用它替换了你手中的JS，它就会工作。看起来你需要把负号向左拉一点，但当它出现在你的整个UI中时，这可能不是问题。哦，我将从起始html中删除accordion活动类，并让它以编程的方式添加，除非你也将这些类设置为显示该类的accordion内容。否则，它会以一个减号的切换图标开始，但手风琴并没有真正打开。另外，添加以下内容以开始关闭小提琴：

$（“.accordion content”）.not（$（this.next（））.hide（）