Question

在我们的网站上添加了汉堡菜单。没有控制台日志错误，并且菜单拒绝展开。

有问题的页面-https://www.harpercollege.edu/foundation/alumni-dev/index.php

我正在使用的密码笔-https://codepen.io/anon/pen/vQNmgx

一切都可以在Codepen中正常工作，并且在实时站点中看起来还不错。我可以单击或展开。目的是能够扩展菜单并推翻页面的其余部分。

{HTML}

<body>
    <nav class="side-nav hidden">
        <div>
            <div class="open-menu-side" id="side">
                <button class="hamburger hamburger--squeeze" type="button">
                  <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                  </span>
                </button>
            </div>
            <ul class="side-nav-ul">
                <a href="#"><li class="block">Home</li></a>
                <a href="#"><li class="block">Profile</li></a>
                <a href="#"><li class="block">Blogs</li></a>
                <a href="#"><li class="block">Following</li></a>
                <a href="#"><li class="block">Settings</li></a>
                <a href="#"><li class="block">Logout</li></a>
            </ul>
        </div>
    </nav>
    <header id="pushed">
        <nav>
            <div class="open-menu" id="main">
                <button class="hamburger hamburger--squeeze" type="button">
                  <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                  </span>
                </button>
            </div>
            <div class="brand">Login!</div>
        </nav>
    </header>
    <section></section>

  <p class="hello-text">hello</p>

  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="lib/index.js"></script>
</body>

{JS}

$(".hamburger").on("click", function(){
    $(".hamburger").toggleClass("is-active");
  $('body').toggleClass('menu-active');
    $(".side-nav").toggleClass("hidden");
    if($("#side").hasClass("is-active")){
        $("#main").toggleClass("hidden");
    } else if(!$("#side").hasClass("is-active")) {
        $("#main").toggleClass("hidden");
    }
});

{CSS}

html,body{
  padding: 0;
  margin: 0;
  height: 100%;
  background-color: black;
  box-sizing: border-box;
}
button:focus {outline:0;}
a{
  color: #fff;
}
a:hover{
  color: #fff;
  text-decoration: none;
}
.side-nav{
  position: absolute;
  background-color: gray;
  width: 300px;
  height: 100%;
  z-index: 1;
  right: 0;
}
.open-menu-side{
  position: relative;
  display: block;
  height: 80px;
  width: 100%;
  text-align: center;
  float: right;
}
.side-nav-ul{
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  list-style: none;
  font-size: 28px;
  color: #fff;
}
.block{
  height: 40px;
}
header{
  height: 80px;
  background-color: #fff;
}
.brand{
  display: inline-block;
}
.img-menu img{
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: solid 1px black;
  float: left;
}
.hidden{
  position: absolute;
  right: -300px;
}
#pushed{
  position: relative;
}
#main{
  float: right;
}
.hamburger {
  padding: 15px 15px;
  height: 100%;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }


.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hello-text{
  text-align: right;
  color: #fff;
  font-size: 22px;
}
body.menu-active{
  padding-right: 300px;
}

Answer 1

您已将脚本添加了单击处理程序，并将其添加到文档的head中。加载脚本时，$('.hamburger')在DOM中不存在，因此未添加单击处理程序，因此单击无效。

要解决此问题，请考虑将脚本移至页面底部，或将其包装在$(document).ready()中。

JS汉堡菜单有问题

1 个答案: