1

我正在关注本教程编辑：更改了指向视频特定时间的链接 https://www.youtube.com/watch?v=XZsuI5wyRzs&feature=youtu.be&t=560，了解如何在我深入了解主要内容之前制作响应式导航栏.

出于某种原因，在此时间线的这一部分（我保存了当前时间的链接，这样您就可以看到我在说什么而不必浏览视频）我完全按照这些步骤操作，但是我的汉堡包图标没有被激活当它被点击以拉下下拉菜单时。除此之外，其他一切看起来都不错。我的代码有什么问题？请看下面。

谢谢

/*CSS Page*/

/*-----HTML Body-----*/

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/*----End HTML Body-----*/

/*-----Start of Navigation Bar-----*/

nav {
  width: 100%;
  background: #8000ff;
}

ul {
  width: 50%;
  margin: 0 auto;
  padding: 0;
}

ul li {
  list-style: none;
  display: inline-block;
  padding: 20px;
}

/*For mouse hover*/

ul li:hover {
  background: #4dff4d;
}

/*Smartphone/Tablet: Menu Bar*/

.toggle {
  width: 100%;
  padding: 10px 20px;
  background: #cc66ff;
  text-align: right;
  box-sizing: border-box;
  color: #000000;
  font-size: 30px;
  display: none;
}

/*-----End of Navigation Bar-----*/

/* Media Queries for Smaller Screen Size Begins */

@media (max-width: 786px) {
    .toggle {
      display: block;
    }

/* Navigation Drop down */

    ul {
      width: 100%;
      display: none;
    }

/* End Navigation Drop Down */

    ul li {
      display: block;
      text-align: center;
    }
    .active {
      display: block;
    }
}


/* Media Queries for Smaller Screen Size Ends */
<!DOCTYPE html>

<!--HTML Page-->

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>test</title>
  </head>

  <link rel="stylesheet" href="css/style.css">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <body>


    <nav>
      <div class="toggle">
        <i class="fa fa-bars menu" aria-hidden="true"></i>
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript">
      $(document).ready() {
        $('menu').click(function() {
          $('ul').toggleClass('active')
        })
      })
    </script>

  </body>
</html>

4

1 回答 1

2

2个问题...

  1. 就绪事件上缺少回调函数...

    $(document).ready()

必须是这个...

$(document).ready(function () {

  1. 你错过了“。” 在“菜单”类选择器前面...

    $('menu')

必须是这样的...

$('.menu')

下面的工作示例...

/*CSS Page*/

/*-----HTML Body-----*/

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/*----End HTML Body-----*/

/*-----Start of Navigation Bar-----*/

nav {
  width: 100%;
  background: #8000ff;
}

ul {
  width: 50%;
  margin: 0 auto;
  padding: 0;
}

ul li {
  list-style: none;
  display: inline-block;
  padding: 20px;
}

/*For mouse hover*/

ul li:hover {
  background: #4dff4d;
}

/*Smartphone/Tablet: Menu Bar*/

.toggle {
  width: 100%;
  padding: 10px 20px;
  background: #cc66ff;
  text-align: right;
  box-sizing: border-box;
  color: #000000;
  font-size: 30px;
  display: none;
}

/*-----End of Navigation Bar-----*/

/* Media Queries for Smaller Screen Size Begins */

@media (max-width: 786px) {
    .toggle {
      display: block;
    }

/* Navigation Drop down */

    ul {
      width: 100%;
     /* display: none; */
      display: block;
      height:0px;
      transition: height 0.5s linear;
      overflow: hidden;
    }

/* End Navigation Drop Down */

    ul li {
      display: block;
      text-align: center;
    }
    .active {
      /* display: block; */  
      height: 300px;
    }
}

/* Media Queries for Smaller Screen Size Ends */
<!DOCTYPE html>

<!--HTML Page-->

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>test</title>
  </head>

 <!-- <link rel="stylesheet" href="css/style.css"> -->
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <body>


    <nav>
      <div class="toggle">
        <i class="fa fa-bars menu" aria-hidden="true"></i>
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $('.menu').click(function() {
          $('ul').toggleClass('active')
        })
      })
    </script>

  </body>
</html>

于 2019-01-21T20:52:53.273 回答