汉堡菜单不起作用

Hamburger menu not functioning

本文关键字：不起作用 菜单      更新时间：2024-06-15

我已经接近这个汉堡菜单了，但它仍然无法正常工作。任何帮助都会很棒。（我相信这是显而易见的，但森林换树木等等。）对于一个新手来说，我的js似乎不起作用/触发/不管正确的词是什么。也许我把它联系错了？

<!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>

更好的选择是将脚本移动到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

相关文章：