Jquery滑动切换

我在网上找到了一个幻灯片切换手风琴内容分区的教程。唯一的问题是，我希望a+显示在非活动选项卡上，a-显示在活动选项卡上

<div id="accordion">

  <h4 class="accordion-toggle">Accordion 1</h4>
  <div class="accordion-content default">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>


  <h4 class="accordion-toggle">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>

  <h4 class="accordion-toggle">Accordion 3</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>

    <h4 class="accordion-toggle">Accordion 4</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>

    <h4 class="accordion-toggle">Accordion 5</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>


    <h4 class="accordion-toggle">Accordion 6</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, eam dolores placerat ea. Sed posse appetere principes ei, sea enim erat eu, mea id erant albucius definitionem. Eu tation erroribus has, te his dolor aliquip assueverit, eam esse aeterno at. Aperiri vivendum consequat vis ne. Ad idque pericula disputationi pri, ignota dissentiunt sea in, pri ut putant mediocrem dissentiunt.
</p>
  </div>


</div>



$(document).ready(function ($) {
    $('#accordion').find('.accordion-toggle').click(function () {

        //Expand or collapse this panel
        $(this).next().slideToggle('slow');

        //Hide the other panels
        $(".accordion-content").not($(this).next()).slideUp('slow');




    });
});



h4 {

font-size:25px;
font-weight:bold;

margin-left:4%;
color:#000000;
}

.accordion-toggle {cursor: pointer;}
  .accordion-content {display: none;}
  .accordion-content.default {display: block;}

---

将javascript和jquery替换为以下内容：

$(document).ready(function ($) {
checkActive();
$('#accordion').find('.accordion-toggle').click(function () {

    if ($(this).find('b').text() == '+ ') {
        //Hide the other panels
        $(".accordion-content").slideUp('slow',function() {
            $(this).prev().find('b').text('- '); 
        });
    }
    else {
    //Expand or collapse this panel
       $(this).next().slideToggle('slow',function() {
            $(this).prev().find('b').text('+ '); 
        }); 

    //Hide the other panels
        $(".accordion-content").not($(this).next()).slideUp('slow',function() {
            $(this).prev().find('b').text('- '); 
        });
    }
});
});

function checkActive() {
 $('.accordion-toggle').each(function (index, element) {
 if ($(element).next().css('display') == 'block') {
     $(element).html('<b>+ </b>' + $(element).text());
 }
 else {
     $(element).html('<b>- </b>' + $(element).text());
 }
});   
}

---

此脚本将b选项卡替换为标题，并在b选项卡上添加+和-。

谢谢Pichet的回复，但当选项卡处于活动状态时，如已选择，则+仍在标题旁边。这是不正确的，当选择选项卡时，它应该是-并且只有该选项卡的标题旁边应该有-。未激活的其他选项卡旁边应始终有一个+符号，除非选中它们。谢谢没问题，我想你只要切换+和-，应该没问题。[链接]谢谢你，皮切特，太棒了。我能用css设计+-样式吗？由于某种原因，它在我的wordpress网站上不起作用。旧的代码是完美的