HTML

Question

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

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

谢谢

/*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>

Answer 1

2 个问题...

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

$(document).ready()

需要这样...

$(document).ready(function () {

你漏掉了“.”在 'menu' class 选择器前面...

$('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>

HTML - 响应式导航栏：脚本不工作

HTML - Responsive Navigation Bar: SCRIPT NOT WORKING

css

menu

media-queries

responsive-navigation