目前我有一个可以展开和折叠的手风琴:https://jsfiddle.net/cliffeee/a5uxgkmt/15/。
我想使用fontawesome来创建手风琴的图标。但是,我想使用Fontawesome类,例如:https://fontawesome.com/icons/plus?style=solid
https://fontawesome.com/icons/minus?style=solid
我想知道在我的jquery或cshtml中,我可以在哪里添加有趣的类?
<i class="fas fa-plus" /i>
<i class="fas fa-minus" /i>
发布于 2019-09-12 06:25:29
var coll = document.getElementsByClassName("accordion-toggle");
for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function(evnt) {
const currClassList = evnt.target.classList;
if (currClassList.contains('collapsed')) {
evnt.target.classList.remove("collapsed");
evnt.target.querySelector('.fa').classList.remove("fa-minus");
evnt.target.querySelector('.fa').classList.add("fa-plus");
var content = evnt.target.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");
evnt.target.querySelector('.fa').classList.remove("fa-plus");
evnt.target.querySelector('.fa').classList.add("fa-minus");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
}
});
}
.accordion-toggle {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: calc(100% - 18px);
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;
}
.container {
max-width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<h2 class="accordion-toggle">Open Collapsible<i class="fa fa-plus pull-right"></i></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">Open Section 1<i class="fa fa-plus pull-right"></i></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>
</div>
https://stackoverflow.com/questions/57897402
复制相似问题