使用Javascript的多個元素，只有第一個作品

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>