Question

我有一个手风琴，我想为其添加一堂课，但是却很难做到这一点。将.faq-active附加到'a'和'content'div可以正常工作，但是我试图将一个活动类附加到'accordion-item'的父div上，这似乎不起作用。值得注意的是，我正在尝试追加到父类，因此，如果有更有效的方法，我可以接受。

结构：

<div class="faq-accordion">
    <div class="accordion-item">
        <a>FAQ Title</a>
        <div class="content">
            FAQ Description
        </div>
    </div>
    <div class="accordion-item">
        <a>FAQ Title</a>
        <div class="content">
            FAQ Description
        </div>
    </div>
</div>

Javascript：

<script>

    const accordion_item = document.querySelectorAll(".accordion-item");
    const items = document.querySelectorAll(".faq-accordion a");

    function accordion(){
        this.classList.toggle('accordion-active');
    }

    function toggleAccordion(){
        this.classList.toggle('faq-active');
        this.nextElementSibling.classList.toggle('faq-active');
    }

    accordion_item.forEach(accordion => accordion.addEventListener('click', accordion));
    items.forEach(item => item.addEventListener('click', toggleAccordion));

</script>

非常感谢您的帮助。

Answer 1

您的问题似乎是您正在将元素传递到addEventListener参数中。 accordion_item.forEach(accordion => accordion.addEventListener('click', accordion));

变量accordion被设置为forEach循环中的元素，但是您希望accordion是一个函数。解决方案非常简单，只需更改函数名称或forEach中的变量名称即可。

工作代码：

const accordion_item = document.querySelectorAll(".accordion-item");
const items = document.querySelectorAll(".faq-accordion a");

function accordion() {
  this.classList.toggle('accordion-active');
}

function toggleAccordion() {
  this.classList.toggle('faq-active');
  this.parentElement.classList.toggle('faq-active');
}

accordion_item.forEach(element => element.addEventListener('click', accordion));
items.forEach(item => item.addEventListener('click', toggleAccordion));

body {
  user-select: none;
}

.accordion-item {
  background-color: rgba(255, 0, 0, 0.5);
  border: 3px solid blue;
  cursor: pointer;
  margin-top: 5px;
  color: #000;
}

.content {
  background-color: rgba(0, 255, 0, 0.2);
}

.faq-active {
  color: #fff;
}

.accordion-active {
  border: 3px solid red;
}

<div class="faq-accordion">
  <div class="accordion-item">
    <a>FAQ Title</a>
    <div class="content">
      FAQ Description
    </div>
  </div>
  <div class="accordion-item">
    <a>FAQ Title</a>
    <div class="content">
      FAQ Description
    </div>
  </div>
</div>

小提琴： https://jsfiddle.net/SnowLord/z6aLpgn9/

Answer 2

    const faq_accordion = document.querySelector(".faq-accordion");
    const accordion_item = document.querySelectorAll(".accordion-item");
    const items = document.querySelectorAll(".faq-accordion a");

    faq_accordion.addEventListener('click', faqAccordion);

    function faqAccordion(){
      this.classList.toggle('accordion-active');
    }

    function accordion(){
        this.classList.toggle('accordion-active');
    }

    function toggleAccordion(){
        this.classList.toggle('faq-active');
        this.nextElementSibling.classList.toggle('faq-active');
    }

    accordion_item.forEach(accordion => accordion.addEventListener('click', accordion));
    items.forEach(item => item.addEventListener('click', toggleAccordion));

<div class="faq-accordion">
    <div class="accordion-item">
        <a>FAQ Title</a>
        <div class="content">
            FAQ Description
        </div>
    </div>
    <div class="accordion-item">
        <a>FAQ Title</a>
        <div class="content">
            FAQ Description
        </div>
    </div>
</div>

Answer 3

我将使用一个简单的切换器，然后您可以确定要做什么。照原样，如果您单击并没有激活它，则它将激活它，否则将使另一个无效，并使被单击的一个激活。我以两种方式做到了这一点，一种是在元素上，另一种是在父元素上，这样您就可以了解它如何工作。我在课堂上加了边框以作说明。尝试点击“常见问题说明”或“常见问题标题”

const accordion_item = document.querySelectorAll(".accordion-item > .content");
const items = document.querySelectorAll(".faq-accordion a");

function doToggle(classT, el) {
  let cActive = document.querySelectorAll("." + classT);
  let elActive = cActive[0];
  let isSame = el == elActive;
  //console.log('doToggle',classT, aActive, "el:", el, "isSame:", isSame);
  if (!!cActive.length && !isSame) {
    elActive.classList.toggle(classT, false);
  }
  if (!el.length) {
    el.classList.toggle(classT);
  }
}

function itemToggle(event) {
  let classT = 'accordion-active';
  event.stopPropagation();
  let closestElement = this.closest('.accordion-item');
  doToggle(classT, closestElement);
}

function toggleFaq(event) {
  let classT = 'faq-active';
  event.stopPropagation();
  doToggle(classT, this);
}

accordion_item.forEach(item => item.addEventListener('click', itemToggle));
items.forEach(item => item.addEventListener('click', toggleFaq));

.accordion-active {
  border: solid lime 1px;
}

.faq-active {
  border: solid blue 1px;
}

<div class="faq-accordion ">
  <div class="accordion-item">
    <a>FAQ Title</a>
    <div class="content">
      FAQ Description
    </div>
  </div>
  <div class="accordion-item">
    <a>FAQ Title</a>
    <div class="content">
      FAQ Description
    </div>
  </div>
</div>

用JavaScript将类追加到父div

3 个答案: