jQuery 菜单没有关闭答案

【问题标题】：jQuery menu doesn't closejQuery 菜单没有关闭
【发布时间】：2020-07-05 13:40:30
【问题描述】：

我是 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);
}

【问题讨论】：

标签： jquery css animation menu

【解决方案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');
  });
});

【讨论】：

【解决方案2】：

如果我的理解正确，您希望在单击菜单链接之一时关闭菜单。您目前没有为此设置任何触发器。您需要绑定链接以触发“点击”事件。

【讨论】：