JavaScript 手风琴 - for 循环内部 for 循环的问题

Question

I wrote javascript code for a simple accordion. The program works, but I have a problem that every time I load the page I have to double-click on heading (h2 tag), after that it works well and responds to one click. I don't know why it doesn't go into the second for loop immediately after the page loads?

 var acc = document.getElementsByClassName("accordionItemHeading"); var panel = document.getElementsByClassName("textAccordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); console.log(i); for (i = 0; i < acc.length; i++) { if (acc[i].classList.contains("active") && panel[i].style.display === "none"){ panel[i].style.display = "block"; console.log(i); } else { panel[i].style.display = "none"; } acc[i].classList.remove("active"); } }); }

 .textAccordion { display: none; background-color: blue; overflow: hidden; }

 <div class="accordion"> <h2 class="accordionItemHeading">One</h2> <p class="textAccordion">Aenean pretium lorem sit amet sapien ornare, sit amet consequat mauris fringilla.</p> <h2 class="accordionItemHeading">Two</h2> <p class="textAccordion">Aenean pretium lorem sit amet sapien ornare, sit amet consequat mauris fringilla.</p> <h2 class="accordionItemHeading">Three</h2> <p class="textAccordion">Aenean pretium lorem sit amet sapien ornare, sit amet consequat mauris fringilla.</p> <h2 class="accordionItemHeading">Four</h2> <p class="textAccordion">Aenean pretium lorem sit amet sapien ornare, sit amet consequat mauris fringilla.</p> </div>

Answer 1

At first, your panels have "" set as their display style.

The only issue was that the if condition failed because of this.

If you set display: none at the start of the first loop (before the event listener), the behavior is the one you're expecting.

 var acc = document.getElementsByClassName("accordionItemHeading"); var panel = document.getElementsByClassName("textAccordion"); var i; for (i = 0; i < acc.length; i++) { panel[i].style.display = "none"; acc[i].addEventListener("click", function() { this.classList.toggle("active"); for (i = 0; i < acc.length; i++) { if (acc[i].classList.contains("active") && panel[i].style.display === "none"){ panel[i].style.display = "block"; console.log(i); } else { panel[i].style.display = "none"; } acc[i].classList.remove("active"); } }); }

 .textAccordion { display: none; background-color: blue; overflow: hidden; }

 <div class="accordion"> <h2 class="accordionItemHeading">One</h2> <p class="textAccordion">Aenean pretium lorem sit amet sapien ornare, sit amet consequat mauris fringilla.</p> <h2 class="accordionItemHeading">Two</h2> <p class="textAccordion">Aenean pretium lorem sit amet sapien ornare, sit amet consequat mauris fringilla.</p> <h2 class="accordionItemHeading">Three</h2> <p class="textAccordion">Aenean pretium lorem sit amet sapien ornare, sit amet consequat mauris fringilla.</p> <h2 class="accordionItemHeading">Four</h2> <p class="textAccordion">Aenean pretium lorem sit amet sapien ornare, sit amet consequat mauris fringilla.</p> </div>

Answer 2

It doesn't go to the second for loop after the page loads is because second for loop is inside event handler. So event handler will be called when you actually click something, .addEventListener("click", () => {}) so when you first click it then it goes to your event loop, and executes the callback with your for loop.