Question

简单的手风琴 js

2021-07-24

133

javascript

我在删除上一个活动类时遇到问题，我想用手风琴打开一个项目，但每当我打开下一个项目时，我都不想关闭前一个项目。我该如何实现？

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> 未捕获的 TypeError：无法读取未定义的属性“classList””

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

})

Answer 1

最简单的方法是每次我们点击标签元素时删除 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>

Answer 2

为了实现所需的行为，您需要删除任何元素上存在的 active 类（除非该元素是当前元素）。

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>