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);
  }

});

SCSS

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');
}

Updated CodePEN

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Javascript Accordion - 当选择一个时折叠其他部分

1 个答案: