Question

我正在为我的网站制作一个汉堡包菜单，一切正常，直到我点击链接。之后，它将带我进入新页面，但单击菜单将不执行任何操作。刷新页面修复了问题所以我尝试添加一个window.location.reload，它在chrome中工作正常，但不会在Safari和Firefox中关注链接。

这是菜单的代码：

HTML＆amp; 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');
    })
});

Answer 2

啊，我道歉。我花了很长时间在线查看解决方案，我发现问题是我加载的其他一些javascript库与代码冲突。

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

2 个答案: