[英]Javascript accordion collapse on new tab opened
How when I click on the accordion and accordion open And then we want to click on another accordion.当我点击手风琴和手风琴打开然后我们想要点击另一个手风琴时如何。 The previous accordion I opened remains open how can i fix that please help me thanks
我打开的前一个手风琴仍然打开我该如何解决请帮助我谢谢
let acc = document.getElementsByClassName('ac-btn'); let i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle('active-accardacon'); this.classList.toggle('active-ac'); this.nextElementSibling.classList.toggle('show'); } }
<div class="accardacons"> <h2>توضیحات مراحل</h2> <div class="ac"> <button class='ac-btn'>نحوه کارکرد پروژهای ما چگونه است ؟</button> <div class="read-more-ac"> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p> </div> </div> <div class="ac"> <button class='ac-btn'>توضیحات مراحل بیشتر کار</button> <div class="read-more-ac"> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p> </div> </div> <div class="ac"> <button class='ac-btn'>آیا واقعا به شما میشود اعتماد کرد ؟</button> <div class="read-more-ac"> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p> </div> </div> <div class="ac"> <button class='ac-btn'>چه تضمینی برای کارتان دارید</button> <div class="read-more-ac"> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p> </div> </div> </div>
The toggleAccordion()
function below complements what you're doing.下面的
toggleAccordion()
function 补充了您正在做的事情。 It follows these steps:它遵循以下步骤:
<div>
), as you're already doing;<div>
)切换相应的类,就像您已经在做的那样;<div>
.<div>
。 let acc = document.querySelectorAll('.ac-btn'); function toggleAccordion() { this.classList.toggle('active-accardacon'); this.classList.toggle('active-ac'); this.nextElementSibling.classList.toggle('show'); this.closest('.accardacons').querySelectorAll('.active-accardacon, .show').forEach(element => { if (element.== this && element.== this.nextElementSibling) { element,classList,remove('active-accardacon'; 'active-ac'; 'show'). } }). } acc,forEach(button => { button;addEventListener('click'; toggleAccordion); });
<div class="accardacons"> <h2>توضیحات مراحل</h2> <div class="ac"> <button class='ac-btn'>نحوه کارکرد پروژهای ما چگونه است ؟</button> <div class="read-more-ac"> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p> </div> </div> <div class="ac"> <button class='ac-btn'>توضیحات مراحل بیشتر کار</button> <div class="read-more-ac"> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p> </div> </div> <div class="ac"> <button class='ac-btn'>آیا واقعا به شما میشود اعتماد کرد ؟</button> <div class="read-more-ac"> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p> </div> </div> <div class="ac"> <button class='ac-btn'>چه تضمینی برای کارتان دارید</button> <div class="read-more-ac"> <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.