汉堡菜单不起作用

Question

我已经接近这个汉堡包菜单了，但它仍然无法正常工作。任何帮助都会很棒。（我敢肯定这很明显，但是只见树木不见森林等等。）对于新手来说，我的 js 似乎不是 functioning/triggering/whatever 正确的词。也许我链接错了？

<!DOCTYPE html>
<title>Bad Doc</title>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script> 
      $('.menu-btn').click(function(){
        $('.responsive-menu').toggleClass('expand')
      })
    </script>
    <style>

      .clearfix:after {
        content: "";
        display: table;
        clear: both;
      }


      .body {
        margin: 0;
        padding: 0;
      }

      a:hover { 
        background-color: #D3D3D3;
      }

      a:link {
        text-decoration: none;
      }

      p {
        font-family: "Garamond", Times, serif;
      }

      .wrapper {
        border: 1px solid blue;
        padding: 1px;
        background-color: gray;
      }

      .main-nav {
        border: 1px solid blue; 
        float: left;
        margin: 0 5px 0 0;
      }

      .content {
        border: 1px solid blue; 
        overflow: auto;

      }

      h1 {
        font-size: 72px;
        text-align: center;
        margin: 0 0 20px 0;
        font-family: "Garamond", Times, serif;
      }

      ul {
        margin-right: 10px;
        padding: 0 20px 0 20px;
      }

      li {
        list-style-type:none;
        font-family: "Garamond", Times, serif;
        font-size: 14px;
      }

      .photos {
        text-align: center;
      }

      img {
        max-width: 30%;
        height: auto;
        opacity: 0.7;
        filter: alpha(opacity=70); 
      }   

      img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); 
      }

      #footer p {
        text-align: center;
        font-size: 14px;
        border: 1px solid blue; 
        margin: 3px 0 0 0;
        padding: 3px;
        background-color: gray;
      }

      @media only screen and (max-width: 600px) {
        body {
          background-color: lightblue;
        }
        img {max-width: 70%; padding-bottom: 10px;
        }
        h1 {
          font-size: 30px;
        }
        .content {
          background-color: black;
          padding-right: 0;
          margin-left: 60px;
          margin-right: 60px;
        }

        .menu-btn div{
          float: left;
          padding-right: 8px;
          margin-top: 1em;
          line-height: 1.2;
          font-size: 18px;
          font-weight: 200;
          vertical-align: middle;
          z-index: 99;
        }
        .menu-btn span {
          display: block;
          width: 25px;
          height: 4px;
          margin-bottom: 5px;
          background: rgb(0,0,0);
          z-index: 99;
        }

        .responsive-menu{
          display: none;
          overflow: hidden;
        }

        .responsive-menu ul {
          margin: 0;
          padding: 0;
          width: 100px;
          float: left;
        }

        .responsive-menu li {
          margin: 0;
          padding: 0;
          list-style-type: none;
        }

        .expand {
          display: block !important; 
        }

        <!-- nav ends here-->

    </style>
  </head>

  <body>

    <!-- added clearfix here with style at top of style list-->
    <div class="wrapper clearfix">
      <h1>gage</h1>

      <!-- this is nav-->
      <div class="menu-btn" id="menu-btn">
        <div></div>
        <span></span>
        <span></span>
        <span></span>

        <div class="main-nav responsive-menu">
          <ul>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
          </ul>
        </div>
      </div>

      <!-- this is main body of page -->
      <div class="content"> 
        <div class="photos">
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
        </div>
      </div>
      <!-- this is footer (inside or outside last div???) -->
    </div>

    <div id="footer">
      <p>More stuff</p>
    </div>
  </body>
</html>

Answer 1

更好的选择是将脚本移动到 body 标记的末尾。

如果不行，你需要把这段代码换行：

$('.menu-btn').click(function(){
  $('.responsive-menu').toggleClass('expand')
})

与$(document).ready

像这样：

$(document).ready(function() {
  $('.menu-btn').click(function() {
    $('.responsive-menu').toggleClass('expand')
  })
});

http://jsbin.com/gelode/edit?html,js

汉堡菜单不起作用

Hamburger menu not functioning

html

javascript

css

hamburger-menu