javascript - 汉堡菜单不起作用-6ren

javascript - 汉堡菜单不起作用

转载作者：行者123 更新时间：2023-11-28 15:58:48

我已经接近这个汉堡包菜单了，但它仍然无法正常工作。任何帮助都会很棒。 (我敢肯定这很明显，但树木和所有这些都是森林。)对于新手来说，我的 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

关于javascript - 汉堡菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36620523/

文章推荐： php - 在许多页面上包含一个相同的 html

文章推荐： ios - 无法加载图表数据

文章推荐： php - 快速发布任何内容的 POST 请求

文章推荐： jQuery replaceWith() 在使用 indexOf() 时无法正常工作

抖音开学季完成任务免费领甜筒、汉堡、随机红包等
抖音开学季完成任务免费领甜筒、汉堡、随机红包等打开抖音APP 首页搜索【开学季】下拉页面点击活动进去完成简单任务即可免费领麦当劳甜筒、吉士汉堡、随机红包等! 活动地址：抖音搜索【开学季
html - 汉堡 Menù BootStrap
我有一个用于桌面 View 的导航栏和用于移动设备的汉堡菜单，我有一个关于汉堡菜单的问题；汉堡菜单的栏覆盖了部分背景图像，我希望背景图像始终位于汉堡菜单之后。这是我的代码
java - Android 汉堡/箭头图标动态改变颜色
我想改变抽屉导航的汉堡/箭头图标的颜色。我知道我可以在样式中更改它，但我想在 java 中动态更改它。有人知道怎么做吗？最佳答案使用 appcompat-v7:23.0.1 下一个代码对我有用:
android - 抽屉图标(汉堡)将工具栏图标移离中心
我正在使用带有 DrawerLayout 的工具栏。我的工具栏有 2 个 View (按钮)，一个在中间，一个靠近右边距。当我使用 getSupportActionBar().setDisplayHo
javascript - 2 个与响应式下拉(汉堡)菜单相关的问题
我正在练习如何制作一个响应式汉堡菜单，但我在两个功能上遇到了麻烦，我想让它发挥作用。我在汉堡菜单中使用了一个很棒的字体图标，它不想在屏幕大于 480 像素时消失。我得到那个工作的唯一方法是在图标类上
javascript - bootstrap-通过代码关闭“移动(汉堡)”菜单
我有一个“移动汉堡包”引导菜单（引导3）。我想关闭使用代码打开的汉堡菜单。最佳答案 Bytec0de是正确的：$('elem').collapse('hide'); 关于javascript - b
html - 在 foundation 5 站点的手机和平板电脑尺寸上使用移动菜单(汉堡)
我确定有人问过这个问题，但我似乎找不到不使用 SASS 的示例。我只有一个正在使用的常规 CSS 文件。我希望汉堡菜单更改为较大尺寸的水平菜单。(@media only screen and (min
javascript - 汉堡 : Full screen navigation menu with UL as anchor container
很长一段时间以来，我一直在我的网站上使用汉堡菜单，这是一个具有绝对定位的全屏导航覆盖层，其中导航打开是(css)高度= 100％并且关闭=“0％”。它基于本教程:https://www.w3schoo

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 汉堡菜单不起作用