简单的手风琴js答案

【问题标题】：Simple accordion js简单的手风琴js
【发布时间】：2021-07-24 20:55:19
【问题描述】：

我在删除以前的活动课程时遇到问题，我想用手风琴打开一个项目，但每当我打开下一个项目时，我都不想关闭前一个项目。我怎样才能做到这一点？

let accordion = document.querySelectorAll(".accordion-item")
let accordionText = document.querySelectorAll(".accordion-text")
accordion.forEach((item, i) => {
 
    accordion[i].addEventListener("click", () => {
  accordionText[i].classList.toggle("active")

  })

})

.accordion-text {
  display: none;
}

.active {
  display: block;
}

<div class="accordion-item">
  <div class="accordion-label">
  Test
  </div>
 <div class="accordion-text">
  <p>
  orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
  </p>
  </div>

</div>
<div class="accordion-item">
  <div class="accordion-label">
  Test
  </div>
 <div class="accordion-text">
  <p>
  orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
  </p>
  </div>

</div>
<div class="accordion-item">
  <div class="accordion-label">
  Test
  </div>
 <div class="accordion-text">
  <p>
  orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
  </p>
  </div>

</div>

我尝试了类似的方法，但似乎不起作用。我收到此错误 "<a class='gotoLine' href='#83:31'>83:31</a> Uncaught TypeError: Cannot read property 'classList' of undefined"

accordion.forEach((item, i) => {
  let previousItem = null;
  accordionText[previousItem].classList.remove("active")
    accordion[i].addEventListener("click", () => {
  accordionText[i].classList.toggle("active")
    previousItem = i
  })

})

【问题讨论】：

let previousItem = null：这是你的问题。您基本上是在说accordionText[null]，即undefined。此外，您的 previousItem 变量是本地变量，因此将 i 保存在其中并不能实现您的目标，因为它在每个循环中都会重新定义。此外，您的方法没有考虑下一个项目打开的情况。

标签： javascript

【解决方案1】：

您可以先在点击时删除所有活动类：

let accordion = document.querySelectorAll(".accordion-item")
let accordionText = document.querySelectorAll(".accordion-text")
accordion.forEach((item, i) => {
  
    accordion[i].addEventListener("click", () => {
  console.log(accordionText[i])
  removeClass()
  accordionText[i].classList.toggle("active")

  })

})

const removeClass = () => {
  accordionText.forEach(e => e.classList.remove("active"))
}

.accordion-text {
  display: none;
}

.active {
  display: block;
}

<div class="accordion-item">
  <div class="accordion-label">
  Test
  </div>
 <div class="accordion-text">
  <p>
  orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
  </p>
  </div>

</div>
<div class="accordion-item">
  <div class="accordion-label">
  Test
  </div>
 <div class="accordion-text">
  <p>
  orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
  </p>
  </div>

</div>
<div class="accordion-item">
  <div class="accordion-label">
  Test
  </div>
 <div class="accordion-text">
  <p>
  orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
  </p>
  </div>

</div>

【讨论】：

【解决方案2】：

最简单的方法是每次点击标签元素时删除active类。

const accordionText = document.querySelectorAll('.accordion-text');
const labels = document.querySelectorAll('.accordion-label');

labels.forEach((label, i) => {
  label.addEventListener('click', (e) => {
e.target.nextElementSibling.classList.toggle('active');
labels.forEach((label, j) => {
  if (j !== i) {
    label.nextElementSibling.classList.remove('active');
  }
});
  });
});

.accordion-text {
  display: none;
}

.accordion-label {
  cursor: pointer;
}

.active {
  display: block;
}

<div class="accordion-item">
  <div class="accordion-label">
    Test
  </div>
  <div class="accordion-text">
    <p>
      orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
    </p>
  </div>

</div>
<div class="accordion-item">
  <div class="accordion-label">
    Test
  </div>
  <div class="accordion-text">
    <p>
      orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
    </p>
  </div>

</div>
<div class="accordion-item">
  <div class="accordion-label">
    Test
  </div>
  <div class="accordion-text">
    <p>
      orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
    </p>
  </div>

</div>

【讨论】：

考虑添加对您所做更改的说明。 OP 显然是 JavaScript 的新手。
它的工作方式应该和我原来的帖子一样，当我再次点击同一个项目时它应该关闭，这里没有
@c398wwsfa 我做了更新，现在它可以正常工作了。

【解决方案3】：

为了实现所需的行为，如果活动类存在于任何元素上，您需要删除它，除非它是当前元素。

let accordion = document.querySelectorAll(".accordion-item");
let accordionText = document.querySelectorAll(".accordion-text");

accordion.forEach((item, i) => {
 accordion[i].addEventListener("click", () => {
   accordionText.forEach((el) => {
     if (el.classList.contains('active') && el !== accordionText[i]) {
       el.classList.remove('active');
     }
   });

   accordionText[i].classList.toggle("active");
 });
});

.accordion-text {
  display: none;
}

.active {
  display: block;
}

<div class="accordion-item">
  <div class="accordion-label">
  Test
  </div>
 <div class="accordion-text">
  <p>
  orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
  </p>
  </div>

</div>
<div class="accordion-item">
  <div class="accordion-label">
  Test
  </div>
 <div class="accordion-text">
  <p>
  orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
  </p>
  </div>

</div>
<div class="accordion-item">
  <div class="accordion-label">
  Test
  </div>
 <div class="accordion-text">
  <p>
  orem ipsum – tekst składający się z łacińskich i quasi-łacińskich wyrazów, mający korzenie w klasycznej łacinie, wzorowany n
  </p>
  </div>

</div>

【讨论】：