带有 + 和 - 的 jQuery Accordion 式常见问题解答

Question

我正在尝试在问题前使用 + 和 - 符号制作常见问题 Accordion like this.它几乎可以工作，除非我再次单击打开的部分，减号保持为减号。有什么办法让它加分吗？我尝试为此编写第一条注释行，但它似乎不起作用。当心，我不知道我在用 jQuery 做什么，只是根据我在其他语言中看到和知道的东西来即兴创作。

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

  //Check if this panel is minus and change it to plus *** THIS DOESN'T WORK ***
  if($('img', this).attr('src') == 'minus.png'){
     $('img', this).attr('src', 'plus.png');
  }

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

  //Change this panel to minu
  $('img', this).attr('src','minus.png');

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

  //Change other panels to plus
  $(".accordion-toggle img").not($('img', this)).attr('src', 'plus.png');

});

<!-- CSS -->
<style>
  .accordion-toggle {margin-top: 10px; cursor: pointer; background-color: #F0F0F0; padding: 16px 24px 19px 0px;}
  .accordion-toggle h4 { line-height: 26px; font-weight: 600;}
  .accordion-content {display: none;  background-color: #F0F0F0; padding: 1px 425px 34px 56px; line-height: 25px; }
  .accordion-content.default {display: block;}
  #accordion {
     font-family: "Open Sans"; color: #0D253E; font-size: 16px;
  }
  .plus {
     margin: 3px 16px 3px 20px; float: left;
  }
</style>

<!-- HTML -->
<div id="accordion">
  <div class="accordion-toggle"><h4><img class="plus" src="plus.png" height="20px"/>Question?</h4></div>
  <div class="accordion-content">
    <p>Content text</p>
  </div>
  <div class="accordion-toggle"><img class="plus" src="plus.png" height="20px"/><h4>Question?</h4></div>
  <div class="accordion-content">
    <p>Content text</p>
  </div>
  <div class="accordion-toggle"><h4><img class="plus" src="plus.png" height="20px"/>Question?</h4></div>
  <div class="accordion-content">
    <p>Content text</p>
  </div>
  <div class="accordion-toggle"><h4><img class="plus" src="plus.png" height="20px"/>Question?</h4></div>
  <div class="accordion-content">
    <p>Content text</p>
  </div>
</div>

Answer 1

您可能需要更改在每个 div.accordion-toggle DOM 元素中调用 img 属性的方式

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

    // Check if this panel is minus and change it to plus *** THIS DOESN'T WORK ***

    // @eeya: Change it like this: (Find every img elements
    // under the .accordion-toggle element that called
    // the event listener
    if ($(this).find('img').attr('src') === 'minus.png') {
        $(this).find('img').attr('src', 'plus.png');
    }

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

    //Change this panel to minu
    $('img', this).attr('src','minus.png');

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

    //Change other panels to plus
    $(".accordion-toggle img").not($('img', this)).attr('src', 'plus.png');

});

希望这对您的情况有所帮助。