Question

我试图创建一个向上打开的简单手风琴div。我的手风琴很好用。但我现在想为手风琴添加加号和减号图标。

我在下面的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('-');
  }
})

正如你所看到的，手风琴效果很好，我的加号和减号图标都有效。问题在于，当手风琴被展开时，图标变成了预期的减号，但是当手风琴再次关闭时，图标仍然是一个减号，当它应该回到加号时。

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('-');
          }
    })

Answer 2

如果我是你，我会尽可能用CSS处理这个问题。

在你的CSS中有这个：

$(".accordion h3").click(function() {
  //Inner 
  var jqInner = $(this).next();
  jqInner.toggleClass("active");
  jqInner.toggleSlide();
})

然后在你的jQuery中，执行以下操作：

JTable

相反，您也可以为＆＃39; +＆＃39;创建2个跨度。和＆＃39; - ＆＃39;，并根据＆＃39;活动＆＃39;切换显示属性。类。

Answer 3

进行以下更改：

HTML - 删除范围.plus至h3

   <h3 class="plus"> More Info</h3>

CSS - 添加这两个类来表示手风琴的状态。

       .plus:before {
  content: '+';
}
       .minus:before {
  content: '-';
}

jQuery - 删除两行以进行上滑/下移，并在上下滑动后使用$(this).toggleClass('plus minus')。

    $(".accordion h3").click(function () {
          //Inner 
          var jqInner = $(this).next();
          if (jqInner.is(":visible"))
          {
              jqInner.slideUp()

          }

          else

          {
              jqInner.slideDown()

          }
        $(this).toggleClass('plus minus');
    })

CodePen

<强>段

 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()

   } else

   {
     jqInner.slideDown()

   }
   $(this).toggleClass('plus minus');
 })

.info {
  font-size: 16px;
  width: 70%;
  padding-bottom: 20px;
}
.plus:before {
  content: '+';
}
.minus:before {
  content: '-';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
  <div class="info">test text here</div>
  <h3 class="plus"> More Info</h3>
</div>

Answer 4

试试这个

在代码平台内，条件if(jqInner.is(":visible"))无效。每次调用函数时，它都会移至else部分，因此不会将-更改为+。

我更新了正常运行的代码

＆＃13;

var $accordionIO = $('.accordion h3');
$accordionIO.prev('div').hide();
$accordionIO.click(function() {
  $(this).prev('div').slideToggle();
});
$(".accordion h3").click(function() {
  var jqInner = $(this).next();
  jqInner.slideToggle();
  var t = $(this).find('.plus').html();
  t == "+" ? $(this).find('.plus').html('-') : $(this).find('.plus').html('+');
})

＆＃13;

.info {
  font-size: 16px;
  width: 70%;
  padding-bottom: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
  <div class="info">test text here</div>
  <h3><span class="plus">+</span> More Info</h3>
</div>

＆＃13;

Answer 5

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="accordion">
 <div class="info">test text here</div>
  <h3><span class="plus">+</span> More Info</h3>
  <div class="info">test text here</div>
  <h3><span class="plus">+</span> More Info</h3>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
var $accordionIO = $('.accordion h3');
$accordionIO.prev('div').hide();
$accordionIO.click(function() {
  $(this).prev('div').slideToggle();
});
$(".accordion h3").click(function() {
  $('.info').slideUp();
  $('.plus').html('+');
  var jqInner = $(this).prev();
  jqInner.slideToggle();
  var icon1 = $(this).find('.plus').html();
  icon1 == "+" ? $(this).find('.plus').html('-') : $(this).find('.plus').html('+');
})
</script>
</body>
</html>

＆＃13;

根据手风琴的功能，当一个div扩展时，它应该折叠其他div。扩展的div在点击它时永远不会崩溃。代码使用相同的逻辑。

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

5 个答案: