>

다음 바닐라 자바 ​​스크립트 아코디언이 잘 작동합니다. 나는 지금 나의 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를 사용하지 않습니다.

  • 답변 # 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');
    }
    
    

    업데이트 된 CodePEN

    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>
    
    

  • 이전 node.js - Express MVC 앱을 만들 수 없습니다
  • 다음 HTML 5의 시맨틱 요소에 CSS 스타일을 추가하는 것이 옳습니까?