自举手风琴，改变“+&引用；至-&引用；关于使用jQuery进行折叠

因此，我目前正在尝试在用户单击按钮后显示减号（连字符）。到目前为止，我想尝试的代码都不起作用。你能指出错误在哪里吗

<a role="button" data-toggle="collapse" data-parent="#accordion" 
href="#collapse<?php echo $i; ?>" aria-expanded="false" aria-
controls="collapse<?php echo $i; ?>" class="collapsed text15">

   <i class="more-less glyphicon glyphicon-plus"></i>
    Slot Name

</a>

---

您可以添加

class=“showhide”

并使用以下脚本来实现此目的

$(document).on('click', '.showhide', function (event) {
    var icon = $(this).find('i:first');
    icon.toggleClass('glyphicon-plus').toggleClass('glyphicon-minus');
});

<a role="button" data-toggle="collapse" data-parent="#accordion" 
href="#collapse<?php echo $i; ?>" aria-expanded="false" aria-
controls="collapse<?php echo $i; ?>" class="collapsed text15 showhide">
   <i class="more-less glyphicon glyphicon-plus"></i>
    Slot Name
</a>    

$（文档）.on（'click'，'showhide'，函数（事件）{
var icon=$（this.find（'i:first'）；
icon.toggleClass（'glyphicon-plus'）。toggleClass（'glyphicon-plus'）；
});

您也可以使用CSS实现这一点

.panel-heading .accordion-toggle:after {
font-family: "Glyphicons Halflings";
content: "\e113";
float: right;
}

.panel-heading .accordion-toggle.collapsed:after {
  content: "\e114";
}

正文{
保证金：0；
}
a{
光标：指针；
}
.panel默认值>.panel标题{
背景色：rgba（19162176,0.1）；
左边框：17px实心#13a2b0；
}
.手风琴样品{
列表样式：无；
页边距底部：0；
填充：0；
}
.小组标题{
颜色：黑色；
字体系列：“开普勒标准”；
字体大小：36px；
字号：700；
文本转换：大写；
}
.小组委员会{
左边框：4px实心#13a2b0；
填充：28px28px28px；
}
.面板组.面板+.面板{
利润上限：28px；
}
.手风琴样品{
背景色：rgba（0,0,0,0.05）；
边缘底部：15px；
}
.手风琴样品：最后一个孩子{
页边距底部：0！重要；
}
.手风琴图像{
高度：100px；
}
.手风琴项目{
显示：内联块；
}
.手风琴项目链接{
颜色：#000；
字体系列：“开普勒标准”；
字体大小：32px；
左边距：15px；
}
.手风琴项目链接：悬停{
颜色：#13a2b0；
}
.手风琴a项{
文字装饰：无；
}
.小组标题a{
文字装饰：无；
}
.面板标题.手风琴切换：后{
字体系列：“半人字形”；
内容：“\e113”；
浮动：对；
}
.面板标题.手风琴切换.折叠：之后{
内容：“\e114”；
}

项目1


项目2


项目3


项目4


项目5

$（“.glyphicon”）。removeClass

选择所有图标，这可能不是您想要的。使用

$（e.target）.prev（）.find（“i”）

代替图标。检查此工作演示：

$（函数（）{
$（“.collapse”）.on（'show.bs.collapse'，函数（e）{
如果（$（此）.is（即目标））{
snippet.log（“show”+this.id）
}
$（e.target）.prev（）.find（“i”）.removeClass（“glyphicon plus”）.addClass（“glyphicon减号”）；
})
$（“.collapse”）.on（'hidden.bs.collapse'，函数（e）{
如果（$（此）.is（即目标））{
snippet.log（“隐藏”+this.id）
}
$（e.target）.prev（）.find（“i”）.removeClass（“glyphicon-minus”）.addClass（“glyphicon-plus”）；
})
});

可折叠组项目#2
可折叠组项目#3
代码是否在页面底部？还是包装在就绪函数中？（即，
$（function（）{…}）；
）您使用了jQuery（'#accordion'），但没有为其分配带有锚定标记的id=“accordion”。我使用[jQuery（function（）{…}）；]对其进行了包装，并且与上面显示的代码一样。但仍然不起作用。在这部分$（“.collapse”）.on（'show.bs.collapse'，函数（e）应该是.collapse还是.collapse？@user7560422，它是“collapse”->
.panel-heading .accordion-toggle:after {
font-family: "Glyphicons Halflings";
content: "\e113";
float: right;
}

.panel-heading .accordion-toggle.collapsed:after {
  content: "\e114";
}