jQuery меню не закрывается

Question

Я новичок в jQuery и у меня проблемы с закрытием анимации меню. Меню гамбургера при нажатии на услуги, портфолио и т. Д. c. меню не выполняет финальную анимацию и просто остается там. Я вижу, как он двигает страницу, но это все. Меню просто не выполняет закрывающую анимацию, как должно, и остается на экране, пока страница перемещается по желанию. Я понятия не имею, что происходит

Вот код: https://codepen.io/sqerry/pen/mdJzGjd

  $('.menu-toggler').on('click', function () {
    $(this).toggleClass('open');
    $('.top-nav').toggleClass('open');
    $('.bar.half').toggleClass('open');
  })
});

 <div class="menu-toggler">
      <div class="bar half start"></div>
      <div class="bar"></div>
      <div class="bar half end"></div>
    </div>
    <nav class="top-nav">
      <ul class="nav-list">
        <li>
          <a href="index2.html" class="nav-link">Home</a>
        </li>
        <li>
          <a href="#about" class="nav-link">About</a>
        </li>
        <li>
          <a href="#services" class="nav-link">Services</a>
        </li>
        <li>
          <a href="#portfolio" class="nav-link">Portfolio</a>
        </li>
        <li>
          <a href="#experience" class="nav-link">Experience</a>
        </li>
        <li>
          <a href="#contact" class="nav-link">Contact</a>
        </li>
      </ul>
    </nav>

.top-nav.open {
    top: 0;
    border-radius: initial;
}

.menu-toggler {
    position: absolute;
    top: 3rem;
    right: 5rem;
    width: 5rem;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1500;
    transition: transform 650ms ease-out;
}



.menu-toggler.open {
    transform: rotate(-45deg);
}

.bar {
    background: linear-gradient(to right, #ffe838, #fd57bf);
    width: 100%;
    height: 4px;
    border-radius: .8rem;
}

.bar.half {
    width: 50%;
}

.bar.start {
    transform-origin: right;
    transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.open .bar.start {
    transform: rotate(-450deg) translateX(.8rem);
}

.bar.end {
    align-self: flex-end;
    transform-origin: left;
    transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.open .bar.end {
    transform: rotate(-450deg) translateX(-1rem);
}

Answer 1

Если я вас правильно понял, вы хотите, чтобы меню закрывалось при нажатии на одну из ссылок меню. В настоящее время у вас нет настроенных триггеров для этого. Вам нужно будет связать ссылки, чтобы вызвать событие «щелчка».

Answer 2

Попробуйте, добавьте .nav-link, чтобы прослушать событие клика

$(document).ready(function () {
  $('.menu-toggler, .nav-link').on('click', function () {
    $('.menu-toggler').toggleClass('open');
    $('.top-nav').toggleClass('open');
    $('.bar.half').toggleClass('open');
  });
});