我有以下手风琴设置:https://jsfiddle.net/n4tmjaqd/1/
我想更改选项卡的图标,使它们成为加号和减号图标。关闭时为加号,打开时为减号。如何调整CSS以进行更改?甚至可以仅使用CSS来完成,还是必须更改功能?任何指导是非常感谢。谢谢。
$(function() {
$('.accordion .accordion-title').on('click', toggleAccordion);
function toggleAccordion(event) {
var target = $(event.target).closest('.accordion-item');
target.parent('.accordion').find('.accordion-item').not(target).removeClass('is-open');
target.toggleClass('is-open');
}
});
CSS:
.accordion .accordion-item {
border-bottom: 1px solid #000;
}
.accordion .accordion-title {
position: relative;
padding: 15px;
cursor: pointer;
}
.accordion .accordion-content {
display: none;
padding: 0 15px 15px;
}
.accordion .accordion-item.is-open .accordion-content {
display: block;
}
.accordion .arrow {
position: absolute;
display: inline-block;
padding: 5px;
top: 13px;
right: 15px;
background-color: inherit;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.accordion .accordion-item.is-open .arrow {
top: 20px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
HTML:
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
TITLE 1
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 1
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
TITLE 2
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 2
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
TITLE 3
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 3
</div>
</div>
</div>
我为您简化了它:
var acc = document.getElementsByClassName("accordion-title");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.accordion-title {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion-title:hover {
background-color: #ccc;
}
.accordion-title:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.accordion-content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-item">
<button class="accordion-title">TITLE 1</button>
<div class="accordion-content">
CONTENT 1
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-item">
<button class="accordion-title">TITLE 2</button>
<div class="accordion-content">
CONTENT 2
</div>
</div>
<div class="accordion-item">
<button class="accordion-title">TITLE 3</button>
<div class="accordion-content">
CONTENT 3
</div>
</div>
</div>