html 折叠菜单2

Posted 2021-05-10

export default function mountCollapse(cta, content, line) {
  [].forEach.call(cta, (box) => {
    box.parentNode.querySelector(`${content}`)
      .style.opacity = '0';

    box.addEventListener('click', (e) => {
      const item = e.target.parentNode;
      const target = item.querySelector(`${content}`);
      const size = target.querySelectorAll(`${line}`)
        .length * target.querySelectorAll(`${line}`)[0].offsetHeight;

      if (target.style.opacity == '0') {
        target.style.opacity = '1';
        target.style.maxHeight = `${size + 100}px`;
      } else {
        target.style.opacity = '0';
        target.style.maxHeight = '0';
      }
    });
  });
}

import mountCollapse from './_collapse-menu';

const boxColapse = document.querySelectorAll('.collapsed') || '';

if (boxColapse) {
  mountCollapse(boxColapse, '.timeline-content-vids', '.timeline-content-vids-line');
}

import './cursos-single';

<!--Colocar a tag collapsed no botao e a collapsed-content no target-->
<div class="timeline-content">
  <div class="timeline-content-progress"><i class="fa fa-check-circle"></i>
    1/5</div>
  <div class="timeline-content-title collapsed">O COMÉRCIO</div>
  <div class="timeline-content-vids collapsed-content" style="opacity: 0;">
    <div class="timeline-content-vids-line">
        <div class="title-content">
            <span class="title">Empresa e seus elementos</span>
            <span class="lenght">2:21</span>
        </div>
        <div class="action-content"><i class="fa fa-play"></i></div>
        <div class="status-content"><i class="fa fa-check-circle"></i>
        </div>
    </div>
  </div>
</div>