Javascript代码在点击时不显示菜单

标签 javascript html css

我正在构建我的第一个网站，但我遇到了 javascript 与我的响应式导航菜单交互的问题。我已经开发了 HTML 和 CSS，它们可以让我的导航正确呈现，但是当我构建 javascript 来切换菜单时，菜单不会打开或关闭。

在我通过 overflow: hidden; 隐藏菜单之前，HTML 和 CSS 按照规范呈现网页。此外，通过 alert('success'); 测试 javascript 是否正确应用于 header 中。作品。

我无法弄清楚为什么点击时打开/关闭不起作用，在此先感谢您的反馈。

HTML

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css">
    <script type="text/javascript" src="js/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript" src="js/design.js"></script>
    <title>Home</title>
</head>

<body>
    <div id="page">
        <header>
            <a class="logo" href="/Index/Home.html" title="home page"><span>bazaar ceramics</span></a>
        </header>
        <!--navigation-->
        <a class="skip" title="skip to main content" href="#content">skip to main content</a>
        <nav title="navigation" role="navigation">
            <a class="mobile_menu" title="menu" href="#"></a>
            <ul>
                <li><a href="Index.html" aria-haspopup="true" title="home page">Home</a></li>
                <li><a href="HTML/Company/Company.html" aria-haspopup="true" title="Company History">Company Background</a>
                    <ul>
                        <li><a href="HTML/Company/Company/company_bg.html" title="company background">Company Background</a></li>
                        <li><a href="HTML/Company/Company/Company_Mission.html" title="company mission">Our Mission</a></li>
                        <li><a href="HTML/Company/Company/Design_Process.html" title="design process">The Design &amp; Production Process</a></li>
                        <li><a href="HTML/Company/Company/Our_Procducts.html" title="our products">Our Products</a></li>
                        <li><a href="HTML/Company/Company/Achievements.html" title="achievements">Our Achievements</a></li>
                        <li><a href="HTML/Company/Company/Cutomers.html" title="our customers">Our Customers</a></li>
                    </ul>
                </li>
                <li><a href="HTML/Products/Products.html" aria-haspopup="true" title="our products">Products</a>
                    <ul>
                        <li><a href="HTML/Products/Products/Non_Member_Catalogue.html" title="home page">Product Catalogue</a></li>
                        <li><a href="HTML/Products/Products/Workshop.html" title="the workshop">The Company Workshop</a></li>
                        <li><a href="HTML/Products/Products/Process.html" title="design process">The Production Process</a></li>
                    </ul>
                </li>
                <li><a href="HTML/Policies/Policies.html" aria-haspopup="true" title="policies and forms">Policies &amp; Forms</a>
                    <ul>
                        <li><a href="HTML/Policies/Policies/Privacy.html" title="privacy policy">Privacy Policy</a></li>
                        <li><a href="HTML/Policies/Policies/Returns.html" title="returns">Returns Policy</a></li>
                        <li><a href="HTML/Policies/Policies/Handling.html" title="handling">Handling and Care Guide</a></li>
                        <li><a href="HTML/Policies/Policies/FAQ.html" title="FAQ">FAQ</a></li>
                        <li><a href="HTML/Policies/Policies/Documents.html" title="important documents">Important Documents</a></li>
                    </ul>
                </li>
                <li><a href="HTML/Contactus/ContactUs.html" title="contact us">Contact Us</a></li>
                <li><a href="HTML/Signin/Signin.html" title="member sign in">Sign In</a></li>
            </ul>
        </nav>

CSS

nav {
    height: 40px;
    line-height: .8em;
    margin-top: 0;
    background-color: RGB(150, 20, 7);
    color: RGB(250, 245, 239);
    position: relative;
    padding: 5px 0px 0px 25px;
}

nav ul::after {
    content: '';
    display: block;
    clear: both;
}

nav a.mobile_menu {
    width: 35px;
    height: 32px;
    background: url(../Images/icon_menu.svg) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    top 22px;
    margin-left: 10px;
    display: none;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0
}

nav ul li:hover {
    background-color: RGB(181, 89, 81, .8);
}

nav ul li:hover > ul {
    display: block;
}

nav ul li a {
    display: inline-block;
    color: RGB(250, 245, 239);
    padding: 10px 20px;
    text-decoration: none;
    width: auto;
    position: relative;
}

nav ul li a:hover {
    background-color: RGB(181, 89, 81);
}

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    background-color: RGB(181, 89, 81, .8);
}

nav ul ul li {
    position: relative;
}

nav ul ul ul {
    left: 100%;
    top: 0;
}

/*top level menu text*/
nav > ul {
    padding-left: 5px;
}

nav > ul > li {
    float: left
}

nav > ul > li > a {
    padding: 10px 20px 15px 20px;
    width: auto;
}

@media screen and (max-width: 800px) {
nav {
        height: 30px;
        overflow: hidden;
        padding: 3px 0px 3px 0px;
    }

    nav a {
        text-decoration: none;
    }

    nav a.mobile_menu {
        display: block;
    }

    /*nav a.mobile_menu::after {
        line-height: 1.9em;
        margin: 0 0 0 35px;
        color: RGB(250, 245, 239);
        content: "Menu";
    }*/

    nav ul,
    nav ul ul,
    nav ul ul ul {
        display: block;
        position: static;
    }

    nav > ul {
        padding: 0;
    }

    nav > ul > li:first-child {
        float: none;
        margin-top: 35px;
    }

    nav > ul > li {
        float: none;
        margin-top: 10px;
    }

    nav ul li:hover {
        background: none;
    }

    nav ul li a {
        width: auto;
        display: block;
        margin: 8px 10px;
        padding: 6px 15px 6px 2px;
        border-bottom: 1px solid rgba(255, 255, 255, .25);
    }

    nav ul li a:hover {
        background-color: rgba(255, 255, 255, .2);
    }

    nav ul ul {
        background: none;
    }

    nav ul ul li a {
        margin-left: 30px;
    }

    nav ul ul ul li a {
        margin-left: 60px;
    }
}

Javascript

$(document).ready(function () {
    /*alert('success');*/
    $('nav a.mobile_menu').on('click', function () {

        var currentNavHeight = $('nav').height();

        if (currentNavHeight < 33) {

            var newNavHeight = $('nav > ul').height() + 15;
            $('nav').animate({ 'height': newNavHeight + 'px' }, 750);

        } else {

            $('nav').animate({ 'height': '0px' }, 750);

        }

    });

});

请原谅上面的大量代码，添加希望不要遗漏重要的东西。

预期的结果应该是，当屏幕为 800 像素时，菜单应该折叠成一个汉堡菜单按钮(该部分有效)，然后在点击时打开和关闭，但这是无效的。

最佳答案

您的代码工作正常，但您可能想让 anchor 更明显一些，而不是 <a class="mobile_menu" title="menu" href="#"></a> ，您可以向 anchor 添加一些文本:<a class="mobile_menu" title="menu" href="#">Sample text</a> .在这里你可以看到你的代码工作得很好:

$(document).ready(function() {
  /*alert('success');*/
  $('nav a.mobile_menu').on('click', function() {

    var currentNavHeight = $('nav').height();

    if (currentNavHeight < 33) {

      var newNavHeight = $('nav > ul').height() + 15;
      $('nav').animate({
        'height': newNavHeight + 'px'
      }, 750);

    } else {

      $('nav').animate({
        'height': '0px'
      }, 750);

    }

  });

});
nav {
  height: 40px;
  line-height: .8em;
  margin-top: 0;
  background-color: RGB(150, 20, 7);
  color: RGB(250, 245, 239);
  position: relative;
  padding: 5px 0px 0px 25px;
}

nav ul::after {
  content: '';
  display: block;
  clear: both;
}

nav a.mobile_menu {
  width: 35px;
  height: 32px;
  background: url(../Images/icon_menu.svg) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  top 22px;
  margin-left: 10px;
  display: none;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0
}

nav ul li:hover {
  background-color: RGB(181, 89, 81, .8);
}

nav ul li:hover>ul {
  display: block;
}

nav ul li a {
  display: inline-block;
  color: RGB(250, 245, 239);
  padding: 10px 20px;
  text-decoration: none;
  width: auto;
  position: relative;
}

nav ul li a:hover {
  background-color: RGB(181, 89, 81);
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  background-color: RGB(181, 89, 81, .8);
}

nav ul ul li {
  position: relative;
}

nav ul ul ul {
  left: 100%;
  top: 0;
}


/*top level menu text*/

nav>ul {
  padding-left: 5px;
}

nav>ul>li {
  float: left
}

nav>ul>li>a {
  padding: 10px 20px 15px 20px;
  width: auto;
}

@media screen and (max-width: 800px) {
  nav {
    height: 30px;
    overflow: hidden;
    padding: 3px 0px 3px 0px;
  }
  nav a {
    text-decoration: none;
  }
  nav a.mobile_menu {
    display: block;
  }
  /*nav a.mobile_menu::after {
  line-height: 1.9em;
  margin: 0 0 0 35px;
  color: RGB(250, 245, 239);
  content: "Menu";
}*/
  nav ul,
  nav ul ul,
  nav ul ul ul {
    display: block;
    position: static;
  }
  nav>ul {
    padding: 0;
  }
  nav>ul>li:first-child {
    float: none;
    margin-top: 35px;
  }
  nav>ul>li {
    float: none;
    margin-top: 10px;
  }
  nav ul li:hover {
    background: none;
  }
  nav ul li a {
    width: auto;
    display: block;
    margin: 8px 10px;
    padding: 6px 15px 6px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
  }
  nav ul li a:hover {
    background-color: rgba(255, 255, 255, .2);
  }
  nav ul ul {
    background: none;
  }
  nav ul ul li a {
    margin-left: 30px;
  }
  nav ul ul ul li a {
    margin-left: 60px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page">
  <header>
    <a class="logo" href="/Index/Home.html" title="home page"><span>bazaar ceramics</span></a>
  </header>
  <!--navigation-->
  <a class="skip" title="skip to main content" href="#content">skip to main content</a>
  <nav title="navigation" role="navigation">
    <a class="mobile_menu" title="menu" href="#"></a>
    <ul>
      <li><a href="Index.html" aria-haspopup="true" title="home page">Home</a></li>
      <li><a href="HTML/Company/Company.html" aria-haspopup="true" title="Company History">Company Background</a>
        <ul>
          <li><a href="HTML/Company/Company/company_bg.html" title="company background">Company Background</a></li>
          <li><a href="HTML/Company/Company/Company_Mission.html" title="company mission">Our Mission</a></li>
          <li><a href="HTML/Company/Company/Design_Process.html" title="design process">The Design &amp; Production Process</a></li>
          <li><a href="HTML/Company/Company/Our_Procducts.html" title="our products">Our Products</a></li>
          <li><a href="HTML/Company/Company/Achievements.html" title="achievements">Our Achievements</a></li>
          <li><a href="HTML/Company/Company/Cutomers.html" title="our customers">Our Customers</a></li>
        </ul>
      </li>
      <li><a href="HTML/Products/Products.html" aria-haspopup="true" title="our products">Products</a>
        <ul>
          <li><a href="HTML/Products/Products/Non_Member_Catalogue.html" title="home page">Product Catalogue</a></li>
          <li><a href="HTML/Products/Products/Workshop.html" title="the workshop">The Company Workshop</a></li>
          <li><a href="HTML/Products/Products/Process.html" title="design process">The Production Process</a></li>
        </ul>
      </li>
      <li><a href="HTML/Policies/Policies.html" aria-haspopup="true" title="policies and forms">Policies &amp; Forms</a>
        <ul>
          <li><a href="HTML/Policies/Policies/Privacy.html" title="privacy policy">Privacy Policy</a></li>
          <li><a href="HTML/Policies/Policies/Returns.html" title="returns">Returns Policy</a></li>
          <li><a href="HTML/Policies/Policies/Handling.html" title="handling">Handling and Care Guide</a></li>
          <li><a href="HTML/Policies/Policies/FAQ.html" title="FAQ">FAQ</a></li>
          <li><a href="HTML/Policies/Policies/Documents.html" title="important documents">Important Documents</a></li>
        </ul>
      </li>
      <li><a href="HTML/Contactus/ContactUs.html" title="contact us">Contact Us</a></li>
      <li><a href="HTML/Signin/Signin.html" title="member sign in">Sign In</a></li>
    </ul>
  </nav>
</div>

关于Javascript代码在点击时不显示菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58728342/

上一篇：html - 径向渐变椭圆无法正常工作

下一篇：html - 使用 CSS 保持 div 的纵横比

相关文章：

javascript - 使用 node.js 开发丰富的应用程序

Javascript 数组转换为 JSON 对象而不是数组

html - 居中文字和图片在同一行

javascript - 仅当用户将元素悬停几秒钟时才显示 div

html - CSS 填充或边距问题

Javascript 过渡叠加和不透明度

javascript - onClick 事件不适用于 React 中的选项标签

css - 为什么 Linux 上的 Chrome 显示错误的字体粗细？

css - 如何使字体大小相对于父 div？

php - 在 PHP 中创 build 计模板文件

©2024 IT工具网  联系我们