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

Question

我为一个简单的手风琴编写了 javascript 代码。该程序有效，但我有一个问题，每次加载页面时，我都必须在标题（h2 标签）上 double-click，之后它运行良好并响应一次点击。我不知道为什么它在页面加载后不立即进入第二个for循环？

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

它不会在页面加载后进入第二个 for 循环，因为第二个 for 循环在事件处理程序中。因此，当您实际单击某些内容时，将调用事件处理程序，.addEventListener("click", () => {}) 因此，当您第一次单击它时，它会进入您的事件循环，并使用您的 for 循环执行回调。

Answer 2

首先，您的面板 "" 设置为 display 样式。

唯一的问题是 if 条件因此失败。

如果您在第一个循环开始时设置 display: none（在事件侦听器之前），行为就是您所期望的。

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>

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

JavaScript accordion - problem with for loop inside for loop

html

javascript

css

accordion