jQuery 菜单没有关闭

Question

我是 jQuery 的新手，关闭菜单动画时遇到问题。单击服务、投资组合等时的汉堡菜单。菜单不会执行结束动画，只是停留在那里。我可以看到它移动了页面，仅此而已。菜单只是没有按预期执行关闭动画，而是在页面按需要移动时停留在屏幕上。我不知道发生了什么

代码如下： 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

试试这个方法，添加.nav-link监听点击事件

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

Answer 2

如果我没理解错的话，您希望在单击其中一个菜单链接时关闭菜单。您目前没有为此设置任何触发器。您需要绑定链接以触发 "click" 事件。

jQuery 菜单没有关闭

jQuery menu doesn't close

css

jquery

animation

menu