jQuery 菜单没有关闭

Posted 2023-05-08

【中文标题】jQuery 菜单没有关闭

【英文标题】：jQuery menu doesn't close

【发布时间】：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);

【参考方案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】：

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