Javascript 手风琴 - 当一个部分被选中时折叠其他部分

Question

我有以下原版Javacscript手风琴运行良好.我现在正在尝试调整我的toggle功能，以便手风琴中选择的部分以外的部分折叠。这就是我到目前为止所拥有的 - 您将看到这些部分保持打开状态，除非单击它们以关闭：

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>

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.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;
    &.active {
    }
  }
  .accordion-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 400ms;
    &.active {
      overflow: auto;
    }
  }
}

对此的任何帮助将不胜感激 - 我没有为这个项目使用 jQuery。

Answer 1

我们可以先折叠所有部分，然后再打开单击的部分。

只需在切换功能的第一个添加此循环：

var x = document.getElementsByClassName('active');
var i;
for (i = 0; i < x.length; i++) {
  if( x[i]==this ){ break; }
  x[i].nextElementSibling.removeAttribute('style');
  x[i].nextElementSibling.classList.toggle('active');
  x[i].classList.toggle('active');
}

更新的代码笔

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>
<script>
document.addEventListener('DOMContentLoaded', function() {
  function toggle() {
    var x = document.getElementsByClassName('active');
    var i;
    for (i = 0; i < x.length; i++) {
      if( x[i]==this ){ break; }
      x[i].nextElementSibling.removeAttribute('style');
      x[i].nextElementSibling.classList.toggle('active');
      x[i].classList.toggle('active');
    }
    
    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);
  }
});
</script>