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

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

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

我在下面的代码笔上做了一些工作

HTML

正如你所看到的，手风琴工作得很好，我的加号和减号图标也能正常工作。问题是，当手风琴展开时，图标会像预期的那样变为负号，但当手风琴再次关闭时，图标会在本应变回正号时保持负号。

您的代码应该是：

---

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

在您的css中有以下内容：

.accordion h3 .plus {
    content: "+";
}
.accordion h3 active .plus {
    content: "-";
}

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

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

---

相反，您也可以为“+”和“-”创建两个跨距，并根据“活动”类切换其显示属性。

进行以下更改：

HTML-删除span将

.plus

分配给h3

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

jQuery-删除滑动/向下的两行，并在滑动/向下后使用

$（this）。toggleClass（'plus-减号'）

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

          }

          else

          {
              jqInner.slideDown()

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

片段

var$accordioio=$（'.accordionh3'）；
$accordioio.prev（'div'）.hide（）；
$accordionIO.单击（函数（）{
$（this.prev（'div'）.slideToggle（）；
});
$（“.accordion h3”）。单击（函数（）{
//内在的
var jqInner=$（this.next（）；
如果（jqInner.is（“：可见”））{
jqInner.slideUp（）
}否则
{
jqInner.slideDown（）
}
$（this.toggleClass（'plus-减号'）；
})

.info{
字体大小：16px；
宽度：70%；
垫底：20px；
}
.另外：以前{
内容：“+”；
}
.减：以前{
内容:'一';；
}

测试文本在这里
更多信息

试试这个

在代码盘中，如果（jqInner.is（“：visible”）不起作用，则条件

。每次调用函数时，它都会移动到
其他
部分，这样它就不会将
-
更改为
+

我已经更新了正常工作的代码


var$accordioio=$（'.accordionh3'）；
$accordioio.prev（'div'）.hide（）；
$accordionIO.单击（函数（）{
$（this.prev（'div'）.slideToggle（）；
});
$（“.accordion h3”）。单击（函数（）{
var jqInner=$（this.next（）；
jqInner.slideToggle（）；
var t=$（this.find（'.plus'）.html（）；
t==“+”？$（this.find（'.plus'）.html（'-'）：$（this.find（'.plus'）.html（'+'））；
})
.info{
字体大小：16px；
宽度：70%；
垫底：20px；
}

测试文本在这里
+更多信息


测试文本在这里
+更多信息
测试文本在这里
+更多信息
变量$accordionIO=$（'.AccordionH3'）；
$accordioio.prev（'div'）.hide（）；
$accordionIO.单击（函数（）{
$（this.prev（'div'）.slideToggle（）；
});
$（“.accordion h3”）。单击（函数（）{
$（'.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（'+'））；
})
var jqInner=$（this）.next（）；这是错误的。因此，引用的元素永远不可见$（此）指H3在本例中，您需要信息范围。
   <h3 class="plus"> More Info</h3>

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

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

          }

          else

          {
              jqInner.slideDown()

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