Question

问题

当您单击按钮（在浏览器中，而不是在Codepen中）时，菜单不会打开

期望的行为

当您单击“汉堡”按钮时，必须打开菜单。

代码

$(document).ready(function(){
  var burger = $('.btn');
  var menu = $('.full-menu');
  var navItems =$('.nav__item');

  burger.click(function(){
    burger.toggleClass('btn--open');
    menu.toggleClass('menu--open');
  });

  navItems.hover(function(){
    navItems.not($(this)).toggleClass('nav__item--hover');
  });
});

这是我的html

<html>
  <head>
    <title>FlexBox Exercise #2 - Responsive Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>

    <div class="circle"></div>
    <button class="btn">
      <span class="btn__line"></span>
      <span class="btn__line"></span>
      <span class="btn__line"></span>
    </button>
    <div class="full-menu">
      <div class="layer"></div>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item">
            <a href="#" class="nav__link">
              Home
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              About
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Portfolio
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Contacts
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="content">
      <h1 class="title">FlexBox Exercise #2 - Responsive Menu</h1>
    </div>
   <script src="script.js"></script>
  </body>
</html>

我试图对此进行理解，但是我注意到菜单没有在镶边和镶边中打开。是的，在Codepen中可以使用，但是在我的浏览器（Chrome和Edge）中，我只能看到汉堡的动画。

Codepen

pen here

Answer 1

您没有使用jQuery库。

使用它：

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');

* {
  box-sizing:border-box;
}

html{
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
  font-family: 'Playfair Display', serif;
}

body{
  position:relative;
  height:100%;
  width:100%;
  margin: 0;
  padding: 0;
}
.content {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.circle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 95px;
    border-bottom-right-radius: 100%;
    background-color: #f0efef;
}


.title {
    margin: 0;
    font-size: 28px;
    letter-spacing: 1px;
    font-weight: 400;
    padding: 0 15px;
}

.btn{
  position:absolute;
  top:20px;
  left:20px;
  background-color:transparent;
  border:0;
  padding:0px;
  z-index:1;
  cursor:pointer;
}

.btn__line{
  height:2px;
  width:32px;
  display:block;
  background-color:#292929;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  position: relative;
}

.btn__line:nth-child(1){
  left:-4px;
}
.btn__line:nth-child(2){
  left:4px;
}
.btn__line:nth-child(3){
  left:-4px;
}


.btn__line + .btn__line{
  margin-top:6px;
}

.btn:hover .btn__line, .btn--open .btn__line{
  left:0px;
}

.btn--open .btn__line{
  background-color:#fff;
}

.nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    visibilty: hidden;
    transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
    opacity: 0;
    display: flex;
    flex-direction: row;
    -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.nav__item--hover{
  opacity: 0.25;
}

.full-menu {
  position: fixed;
  top:0;
    width: 100%;
  height:0;
    display: flex;
    justify-content: center;
    align-items: center;
   transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
}

.full-menu:before, .full-menu:after{
  content: '';
  height: 0;
   position: fixed;
  top:0;
    width: 100%;
    height: 0;
}

.full-menu:before{
  z-index: -2;
  background-color:#3b3b3b;
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
} 

.full-menu:after{
   z-index: -1;
  background-color:#121212;
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
}



.menu--open:before, .menu--open:after{
  height: 100%;
}

.menu--open:before{
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
} 

.menu--open:after{
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}

.menu--open{
  height:100%;
  transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}

.nav__item {
    padding: 0 20px;
  visibility: hidden;
    transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}

.menu--open .nav__item{
  visibility: visible;
}

.menu--open .nav__list{
  visibilty: visible;
  opacity: 1;
  -webkit-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}

.nav__link {
    text-decoration: none;
    color: #fff;
    font-size: 30px;
  letter-spacing: 1px;
}

.nav__item:hover {
    transform: scale(1.1, 1.1);
    
}
.nav__item:hover .nav__link{
  font-weight:700;
}

.nav__item-not-hover{
  opacity:0.3;
}

@media screen and (max-width:767px){
  .nav__list{
    flex-direction:column;
    text-align:center;
  }
  .nav__item{
    padding:8px 0;
  }
}

@media screen and (max-width:480px){
  .nav__link{
    font-size:26px;
  }
}

<html>
  <head>
    <title>FlexBox Exercise #2 - Responsive Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  
  <body>
    <div class="circle"></div>
    <button class="btn">
      <span class="btn__line"></span>
      <span class="btn__line"></span>
      <span class="btn__line"></span>
    </button>
    <div class="full-menu">
      <div class="layer"></div>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item">
            <a href="#" class="nav__link">
              Home
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              About
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Portfolio
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Contacts
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="content">
      <h1 class="title">FlexBox Exercise #2 - Responsive Menu</h1>
    </div>
  </body>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <script>
  $(document).ready(function(){
  var burger = $('.btn');
  var menu = $('.full-menu');
  var navItems =$('.nav__item');
  
  burger.click(function(){
    burger.toggleClass('btn--open');
    menu.toggleClass('menu--open');
  });
  
  navItems.hover(function(){
    navItems.not($(this)).toggleClass('nav__item--hover');
  });
});

  </script>
</html>

Answer 2

是的，在Codepen中有效，但在我的浏览器（chrome和edge）中

在Codepen jQuery中包含在设置中，但在您的独立代码中不包含jQuery。

下次，请检查代码笔设置和浏览器控制台中的错误。

Answer 3

我敢打赌，如果您打开 Chrome DevTools （F12），则会在控制台中看到此错误：

Uncaught ReferenceError: $ is not defined

这是因为您尝试使用 jQuery 而不包含它。将此添加到您的html文件中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

确保将其放在包含script.js文件的位置上方。

单击时不想打开菜单

3 个答案: