[英]How to close accordion when the other is open?
当有人打开手风琴时,谁能帮助我关闭它。 当前,单击时所有手风琴保持打开状态。 这是代码。
$('.accordion-tabs-toggle').next().hasClass('show'); $('.accordion-tabs-toggle').next().removeClass('show'); $('.accordion-tabs-toggle').next().slideUp(350); $(document).on('click', '.accordion-tabs-toggle', function() { var $this = $(this); $this.siblings('.faq-content').toggleClass('show'); $this.toggleClass('active'); $this.siblings('.faq-content').slideToggle(350); $this.find('.dashicons.dashicons-arrow-down.custom-toggle-tabs').toggleClass('open'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="itinerary-content"> <a href="javascript:void(0);" class="accordion-tabs-toggle"> <div class="title tid_1"> 1.Auctor aspernatur dictum </div> </a> <div class="faq-content" style="display: none;"> <p>Auctor aspernatur dictum perspiciatis </p> </div> </div> <div class="itinerary-content"> <a href="javascript:void(0);" class="accordion-tabs-toggle"> <div class="title tid_2"> 2.Auctor aspernatur dictum </div> </a> <div class="faq-content" style="display: none;"> <p>Auctor aspernatur dictum perspiciatis</p> </div> </div>
Try this:
HTML:
<div class="accordion">
<a href="javascript:void(0);" class="accordion-tabs-toggle">
<div class="title tid_1">
1.Auctor aspernatur dictum
</div>
</a>
</div>
<div class="panel">
<div class="faq-content">
<p>Auctor aspernatur dictum perspiciatis </p>
</div>
</div>
<div class="accordion">
<a href="javascript:void(0);" class="accordion-tabs-toggle">
<div class="title tid_2">
2.Auctor aspernatur dictum
</div>
</a>
</div>
<div class="panel">
<div class="faq-content">
<p>Auctor aspernatur dictum perspiciatis</p>
</div>
</div>
CSS:
div.panel {
display: none;
}
div.panel.show {
display: block !important;
}
JS:
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses) {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els[i].classList[fnName](className);
}
}
您可以使用以下代码实现目标。 这是简单干净的方法。
$(document).ready(function () { $('.accordion-tabs-toggle').on('click', function (e) { e.preventDefault(); $(this).toggleClass('active').siblings('.faq-content').slideToggle(); $(this).parent().siblings().find('.accordion-tabs-toggle').removeClass('active').siblings('.faq-content').slideUp(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="itinerary-content"> <a href="javascript:void(0);" class="accordion-tabs-toggle"> <div class="title tid_1"> 1.Auctor aspernatur dictum </div> </a> <div class="faq-content" style="display: none;"> <p>Auctor aspernatur dictum perspiciatis </p> </div> </div> <div class="itinerary-content"> <a href="javascript:void(0);" class="accordion-tabs-toggle"> <div class="title tid_2"> 2.Auctor aspernatur dictum </div> </a> <div class="faq-content" style="display: none;"> <p>Auctor aspernatur dictum perspiciatis</p> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.