过渡不适用于 div - vanilla js 手风琴

问题描述

我有一些简单的香草手风琴，但我不太确定为什么这里不应用 CSS 过渡？ div 具有正确的高度，这是怎么回事？

（无法发布，因为显然我的问题主要是代码，所以此文本是一个肮脏的修复，抱歉）。

HTML（简化版）

<div class="container">
  <ul>
    <li class="accordion-item">
      <button class="accordion-item__title">
        Title
      </button>
      <div class="accordion-item__body not-active">
        Body
      </div>
    </li>
  </ul>
</div>

JS

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

  const accordions = document.querySelectorAll('.block-accordion');

  if (typeof (accordions) !== 'undefined' && accordions != null) {

    //loop thorugh all acordions
    for (let a = 0; a < accordions.length; a++) {
      const accordion = accordions[a];
      const accordionItems = accordion.querySelectorAll('.accordion-item');

      //loop through all accordiond's items
      for (let i = 0; i < accordionItems.length; i++) {
        const accordionItem = accordionItems[i];

        //show first by default
        accordionItems[0].querySelector('.accordion-item__body').classList.remove('not-active');
        accordionItems[0].querySelector('.accordion-item__body').parentElement.classList.add('active');
        accordionItems[0].querySelector('.accordion-item__title').setAttribute("aria-expanded",true);

        //hide each accordion on click
        const accordionItemTitle = accordionItem.firstElementChild;

        accordionItemTitle.addEventListener('click',function toggleAccordion(e) {

          const accordionContent = accordionItem.querySelector('.accordion-item__body');
          accordionContent.style.height = "auto";

          if (accordionContent.prevIoUsElementSibling === e.target) {
            accordionContent.classList.toggle('not-active');
            accordionContent.parentElement.classList.toggle('active');

            if (accordionContent.classList.contains('not-active')) {
              accordionContent.style.height = '0px';
              accordionContent.prevIoUsElementSibling.setAttribute("aria-expanded",false);
            } else {
              accordionContent.style.height = accordionContent.clientHeight + 'px';
              accordionContent.prevIoUsElementSibling.setAttribute("aria-expanded",true);
            }
          }
        });
      }
    }
  }
});

SASS

.block-accordion {

  .active {
    display: block;
  }

  .not-active {
    display: none;
    transition: height 0.35s ease-in-out;
    overflow: hidden;
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）