javascript - 带有加号和减号图标的 jQuery 可扩展 div

Question

我正在尝试创建一个向上打开的简单 Accordion div。我的 Accordion 工作得很好。但我现在想在 Accordion 中添加加号和减号图标。

我在下面的 codepen 上做了一些工作。 http://codepen.io/Davabo/pen/jqzgxQ

HTML

<div class="accordion">
  <div class="info">test text here</div>
  <h3><span class="plus">+</span> More Info</h3>
</div>

Javascript

var $accordionIO = $('.accordion h3');
$accordionIO.prev('div').hide();

$accordionIO.click(function() {
  $(this).prev('div').slideToggle();
});

$(".accordion h3").click(function() {
  //Inner 
  var jqInner = $(this).next();
  if (jqInner.is(":visible")) {
    jqInner.slideUp()
    $(this).find('.plus').html('+');
  } else

  {
    jqInner.slideDown()
    $(this).find('.plus').html('-');
  }
})

如您所见， Accordion 效果很好，我的加号和减号图标也有点用。问题是，当 Accordion 展开时，图标像预期的那样变成减号，但是当 Accordion 再次关闭时，图标仍然是减号，而它应该变回加号。

Answer 1

你的代码应该是这样的: See codepen

      var $accordionIO = $('.accordion h3');
      $accordionIO.prev('div').hide();

      $(".accordion h3").click(function () {
          //Inner 
          var jqInner = $('.info', $(this).parent());
          if (jqInner.is(":visible"))
          {
              jqInner.slideUp()
              $(this).find('.plus').html('+');
          }

          else

          {
              jqInner.slideDown()
              $(this).find('.plus').html('-');
          }
    })