html 折叠菜单

Posted 2021-05-10

 const boxColapse = document.querySelectorAll('.box header') || '';

  if (boxColapse) {
    [].forEach.call(boxColapse, (box) => {
      box.addEventListener('click', (e) => {
        const item = next(e.target.parentNode);
        const size = item.querySelectorAll('.profile > li')
          .length * 30;

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

.box {
    display: flex;
    flex-direction: column;
    border: solid 1px #1d2129;
    padding: 20px;
    margin: 20px 20px 20px 0;
    overflow: hidden;

    >header {
        font-family: 'Montserrat';
        font-size: 16px;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: 0.5px;
        color: #f7ce5b;
        margin-bottom: 20px;
        cursor: pointer;
    }

    >.box-content {
        opacity: 0;
        max-height: 0;
        transition: max-height .5s ease-in-out, opacity .5s ease-in-out;
        -webkit-transition: max-height .5s ease-in-out, opacity .5s ease-in-out;
        -moz-transition: max-height .5s ease-in-out, opacity .5s ease-in-out;
        -o-transition: max-height .5s ease-in-out, opacity .5s ease-in-out;

        >ul {
            display: flex;
            flex-direction: column;
            list-style: none;
            pointer-events: none;

            >li {
                font-family: 'Montserrat';
                font-size: 13px;
                font-weight: normal;
                font-style: normal;
                font-stretch: normal;
                line-height: 2.31;
                letter-spacing: normal;
                color: #f7f7f2;
            }
        }
    }

    &.double>.divider {
        border-bottom: solid 1px #1d2129;
        margin: 20px 0;
    }
}

 <div class="box">
  <header><h2>Perfil</h2></header>
  <div class="box-content" style="opacity: 0;">
    <ul class="profile">
      <li>Idade - 24 anos</li>
      <li>Peso - 64 kg</li>
      <li>Altura - 170 cm</li>
      <li>Busto - 95 cm</li>
      <li>Cintura - 69 cm</li>
      <li>Quadril - 106 cm</li>
      <li>Pés - 37 cm</li>
      <li>Olhos - Castanhos</li>
      <li>Cabelo - Loiro</li>
    </ul>
  </div>
</div>

<!--OU Box Duplo-->

<div class="box double">
  <header><h2>Atendimemto</h2></header>
  <div class="box-content" style="opacity: 0;">
    <ul class="profile">
      <li>Atende - Elas, Eles, Casais</li>
      <li>Locais - Hotel, Motel</li>
    </ul>
  </div>
  <div class="divider"></div>
  <header><h2>Cidades</h2></header>
  <div class="box-content" style="opacity: 0;">
    <ul class="profile">
      <li>
        Canoas, Esteio, Gramado, Novo Hamburgo, Porto Alegre, São
        Leopoldo, Sapiranga
      </li>
    </ul>
  </div>
</div>