工作代码笔链接：https://codepen.io/boingloings33/pen/PoXpLWR
我有一个功能齐全的手风琴，当我单击下一张幻灯片时，我正在努力使其自动折叠打开的幻灯片。任何帮助将不胜感激，谢谢。
HTML：
<body>
<div class="container">
<div class="accordion" id="accordion-1">
<div class="head">
<h2>Title 1</h2>
</div>
<div class="content">
<p> lorem ipsum </p>
</div>
</div>
<br />
<div class="accordion" id="accordion-2">
<div class="head">
<h2>Title 2</h2>
<i class="fas fa-angle-down arrow"></i>
</div>
<div class="content">
<p> lorem ipsums </p>
</div>
</div>
</body>
JS：
jQuery(function () {
$(".head").on("click", function () {
$(this).toggleClass("active");
$(this).parent().find(".arrow").toggleClass("arrow-animate");
$(this).parent().find(".content").slideToggle(280);
});
});
CSS：
.accordion {
box-shadow: 0px 1px 7px #dbdbdb;
}
.accordion .head {
background-color: #ffffff;
color: #563e6e;
padding: 20px 30px;
cursor: pointer;
transition: 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion .head:hover,
.accordion .active {
background-color: #ffe77aff;
}
.accordion .content {
background-color: #ffffff;
display: none;
padding: 20px 30px;
color: #333333;
}
将js代码替换为以下代码
jQuery(function () {
$(".head").on("click", function () {
let isActive = $(this).hasClass('active');
$(".head").removeClass('active');
$(".head").parent().find(".content").slideUp(280);
$(".head").parent().find(".arrow").removeClass("arrow-animate");
if (isActive == false) {
$(this).addClass('active')
$(this).parent().find(".arrow").addClass("arrow-animate");
$(this).parent().find(".content").slideDown(280);
}
});
});