javascript - 汉堡菜单仅适用于一个链接

Question

我正在为我的站点制作汉堡菜单，在我单击链接之前一切正常。之后，它将带我到新页面，但单击菜单什么也做不了。刷新页面解决了这个问题，所以我尝试添加一个 window.location.reload ，它在 chrome 中工作正常，但不会在 Safari 和 Firefox 中跟踪链接。

这是菜单的代码:

HTML 和 PHP

    <div class="hamburger-menu">
        <div id="nav-icon3">
            <span></span> <span></span> <span></span> <span></span>
        </div>
    </div>
    <nav class="navigation column displaynone" id="nav" role="navigation">
        <ul class="menu">
            <li class="menu-item is-active"><a
                href="http://localhost:8888/general-economy">Home</a></li>
            <li class="menu-item"><a
                href="http://localhost:8888/general-economy/search">Search</a></li>
            <li class="menu-item"><a
                href="http://localhost:8888/general-economy/about">About Us</a></li>
            <li class="menu-item"><a
                href="http://localhost:8888/general-economy/subscribe">Subscribe</a>
            </li>
        </ul>

    </nav>

CSS

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 20px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 100000;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 90%;
  background: #FF00BF;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  z-index: 100000;
}

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 18px;
}

#nav-icon3 span:nth-child(4) {
  top: 36px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

JQUERY

$(document).ready(function(){
    $('#nav-icon3').click(function(){
        $(this).toggleClass('open');
    });

  $('#nav-icon3').click(function() {
    $('#nav').toggleClass('displaynone');
    $('body').toggleClass('only-menu');

   });
});

Answer 1

似乎您的 toggleClass 正在与自身作斗争，因为当您单击 #nav-icon3 时，这两个函数都被炸毁了。以下应该有效:

$(document).ready(function(){
    $('#nav-icon3').click(function(){
        $(this).toggleClass('open');
        $('#nav').toggleClass('displaynone');
        $('body').toggleClass('only-menu');
    })
});