Question

我正在开发一款运行良好的Javascript手风琴组件。我遇到的问题是当我在一个页面上有多个时，只有第一个正在工作。如何调整我的Javascript（没有jQuery）来允许这个？这是许多组件中的第一个（标签等），所以对我出错的地方的一般解释会很棒。这些元素将由CMS添加，因此在这种情况下我无法真正使用ID。

这是一支钢笔： https://codepen.io/mikehdesign/pen/KmeZgG

HTML

<div class="accordion">
  <h4 class="accordion-header">Accordion 1</h4>
  <div class="accordion-content">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-header">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis. Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem, animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
  </div>
  <h4 class="accordion-header">Accordion 3</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

<div class="accordion">
  <h4 class="accordion-header">Accordion 1</h4>
  <div class="accordion-content">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-header">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis. Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem, animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
  </div>
  <h4 class="accordion-header">Accordion 3</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

SCSS

div.accordion {
  .accordion-header {
    cursor: pointer;
    &.active {

    }
  }
  .accordion-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 400ms;
    &.active {
      overflow: auto;
    }
  }
}

的Javascript

document.addEventListener('DOMContentLoaded', function() {

  function toggle() {
    if (this.nextElementSibling.classList.contains('active')) {
        this.nextElementSibling.removeAttribute('style');
    } else {
        var elementHeight = this.nextElementSibling.scrollHeight;
        this.nextElementSibling.style.maxHeight = elementHeight + 'px';
    }

    // Toggle `active` class
    this.nextElementSibling.classList.toggle('active');
    this.classList.toggle('active');
}

  var accordion = document.querySelector('div.accordion');
  var header = accordion.getElementsByClassName('accordion-header');

  for (var i = 0, len = header.length; i < len; i++) {
    header[i].addEventListener('click', toggle);
  }

});

Answer 1

尝试使用document.querySelectorAll('div.accordion .accordion-header');提及querySelectorAll中的所有选择器。不需要为className添加额外.accordion-header

Updated Codepen

document.addEventListener('DOMContentLoaded', function() {

  function toggle() {
    if (this.nextElementSibling.classList.contains('active')) {
      this.nextElementSibling.removeAttribute('style');
    } else {
      var elementHeight = this.nextElementSibling.scrollHeight;
      this.nextElementSibling.style.maxHeight = elementHeight + 'px';
    }

    // Toggle `active` class
    this.nextElementSibling.classList.toggle('active');
    this.classList.toggle('active');
  }

  var accordion = document.querySelectorAll('div.accordion .accordion-header');
  for (var i = 0, len = accordion.length; i < len; i++) {
    accordion[i].addEventListener('click', toggle);
  }

});

div.accordion .accordion-header {
  cursor: pointer;
}

div.accordion .accordion-content {
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: max-height 400ms;
  transition: max-height 400ms;
}

div.accordion .accordion-content.active {
  overflow: auto;
}

<div class="accordion">
  <h4 class="accordion-header">Accordion 1</h4>
  <div class="accordion-content">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-header">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis.
      Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem,
      animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum
      magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
  </div>
  <h4 class="accordion-header">Accordion 3</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

<div class="accordion">
  <h4 class="accordion-header">Accordion 1</h4>
  <div class="accordion-content">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-header">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis.
      Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem,
      animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum
      magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
  </div>
  <h4 class="accordion-header">Accordion 3</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>

使用Javascript的多个元素，只有第一个工作

1 个答案: