JavaScript 用于在手风琴上展开和折叠图标时切换图标

Question

我有一个手风琴，它会膨胀和折叠。这是代码：https：//jsfiddle.net/96jqo3ba/2/。我想使用 FontAwesome 图标类来表示手风琴选项卡何时展开和折叠. 以下是我想要使用的两个 fontAwesome 类：

<i class="fas fa-plus" /i>
<i class="fas fa-minus" /i>

在 cshtml 中，我添加了<i class="fas fa-plus"/i>.我的问题是，在我的 Jquery 脚本中，当手风琴选项卡展开和折叠时，如何在<i class="fas fa-plus" /i>和<i class="fas fa-plus" /i>之间切换？

Jquery：

var coll = document.getElementsByClassName("accordion-toggle");
for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function(evnt) {
const currClassList = evnt.currentTarget.classList;
if (currClassList.contains('collapsed')) {
evnt.currentTarget.classList.remove("collapsed");
var content = evnt.currentTarget.nextElementSibling;
content.style.maxHeight = null;
} else {
for (var j = 0; j < coll.length; j++) {
coll[j].classList.remove("collapsed")
coll[j].nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("collapsed");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
}
});
}

Answer 1

根据您当前的设置，您可以在标记中添加彼此相邻的fa-plus和fa-minus元素，然后使用以下 css 根据是否存在collapsed类来隐藏/显示它们：

.HTML：

<h2 class="accordion-toggle"><i class="fa fa-plus pull-right"></i><i class="fa fa-minus pull-right"></i><button>
Open Collapsible
</button></h2>
<div id="anyId" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h2 class="accordion-toggle"><i class="fa fa-plus pull-right"></i><i class="fa fa-minus pull-right"></i><button>
Open Section 1
</button></h2>
<div class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.CSS：

.accordion-toggle {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsed, .accordion-toggle:hover {
background-color: #555;
}
.collapse {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.fa-minus {
display: none;
}
.collapsed .fa-minus {
display: block;
}
.collapsed .fa-plus {
display: none;
}

Answer 2

您可以使用与更改"collapse"类相同的方法。您只需要获取 icon 元素并根据需要添加或删除类。

像这样：

// Toggle icon
var iconElem = evnt.currentTarget.children[0];
iconElem.classList.remove("fa-minus");
iconElem.classList.add("fa-plus");

这意味着您的新 JS 将是：

var coll = document.getElementsByClassName("accordion-toggle");
for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function(evnt) {
const currClassList = evnt.currentTarget.classList;
if (currClassList.contains('collapsed')) {
evnt.currentTarget.classList.remove("collapsed");
var content = evnt.currentTarget.nextElementSibling;
content.style.maxHeight = null;
// Toggle icon
var iconElem = evnt.currentTarget.children[0];
iconElem.classList.remove("fa-minus");
iconElem.classList.add("fa-plus");
} else {
for (var j = 0; j < coll.length; j++) {
coll[j].classList.remove("collapsed")
coll[j].nextElementSibling.style.maxHeight = null;
coll[j].children[0].classList.remove("fa-minus");
coll[j].children[0].classList.add("fa-plus");
}
this.classList.toggle("collapsed");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
// Toggle icon
var iconElem = evnt.currentTarget.children[0];
iconElem.classList.remove("fa-plus");
iconElem.classList.add("fa-minus");
}
});
}

这是一个工作的小提琴示例： https://jsfiddle.net/o6j49dcy/