为什么我的下拉菜单不适用于导航栏？

Question

I am trying to develop a responsive top nav menu, and I am having a bit of trouble with the hamburger menu. 我正在尝试开发响应式顶级导航菜单，我在汉堡包菜单上遇到了一些麻烦。 When I resize my browser and click on the hamburger icon, it won't do anything. 当我调整浏览器大小并单击汉堡包图标时，它将不会执行任何操作。 I have the jquery on my html, but I can't bring down the menu when the browser is resized for some reason. 我的html上有jquery，但是由于某种原因我无法在浏览器调整大小时关闭菜单。 Any help would be appreciated. 任何帮助，将不胜感激。

here is my code: 这是我的代码：

 $('.nav-toggle').click(function() { if ($('.top-nav-links').css('margin-top') == '-225px') { $('.top-nav-links').css('margin-top', '0'); } else { $('.top-nav-links').css('margin-top', '-255px'); } }); $(window).resize(function() { if ($(window).width() > 730) { $('.top-nav-links').css('margin-top', '0'); } else { $('.top-nav-links').css('margin-top', '-255px'); } }); $(document).ready(function() { if ($(window).width() > 730) { $('.top-nav-links').css('margin-top', '0'); } else { $('.top-nav-links').css('margin-top', '-255px'); } });

 body { margin: 0; padding: 0; font-family: sans-serif; font-size: 16px; color: #333; background-color: #f8f8f8; } .clearfix:after { content: ""; display: table; clear: both; } /* TOP NAVIGATION CSS */ .top-nav { position: relative; width: 100%; height: auto; background-color: #fff; padding: 0 30px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .logo:link { color: red; text-decoration: none; font-size: 26pt; margin: 10.5px 0; display: inline-block; float: left; font-weight: bold; } .logo:visited { color: red; text-decoration: none; } .top-nav-links { display: inline-block; margin: 0; float: right; } .top-nav-links li { display: inline-block; margin: 0 10px; padding: 15px 0; } .top-nav-links li:first-of-type { margin-left: 0; } .top-nav-links li:last-of-type { margin-right: 0; } .top-nav-links li a:link { color: red; text-decoration: none; font-size: 18px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .top-nav-links li a:visited { color: red; text-decoration: none; font-size: 18px; } .top-nav-links li a:hover { color: red; } .nav-toggle { float: right; font-size: 30px; margin: 8.2px 0; color: red; cursor: pointer; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; display: none; } .nav-toggle:hover { color: red; } @media all and (max-width: 730px) { .top-nav-links { position: relative; display: block; width: 100%; height: auto; margin: 0 auto; margin-top: -255px; display: none; } .top-nav-links li { display: block; margin: 0; text-align: center; } .nav-toggle { display: inline-block; } }

 <html> <head> <title>TopNav</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="style.css" rel="stylesheet" type="text/css"> <link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet" type="text/css"> <!-- SCRIPTS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src="functions.js"> </script> </head> <body> <!-- TOP NAVIGATION --> <div class="top-nav clearfix"> <a href="index.html" class="logo">TopNav</a> <div class="nav-toggle"> <i class="icon ion-md-menu"></i> </div> <ul class="top-nav-links"> <li> <a href="#">Home</a> </li> <li> <a href="#">Shop</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Contact Us</a> </li> </ul> </div> </body> </html>

Answer 1

There are some issues in your nav-toggle click function. nav-toggle click功能存在一些问题。

In condition you are checking margin-top value against -225px everywhere else its -255px I think its a typo. 在条件下你正在检查margin-top值-225px到处其他地方-255px我认为这是一个错字。
On max-width: 730px screen you add display: none to top-nav-links class. 在max-width: 730px屏幕上，您将display: none添加到top-nav-links类。 You also need to toggle that in nav-toggle click function. 您还需要在nav-toggle click功能中切换它。

Your final nav-toggle click function might look like: 您的最终nav-toggle click功能可能如下所示：

    $('.nav-toggle').click(function () {
        if ($('.top-nav-links').css('margin-top') == '-255px') {
            $('.top-nav-links').css('margin-top', '0').css('display', 'inline-block');
        } else {
            $('.top-nav-links').css('margin-top', '-255px').css('display', 'none');
        }
    });

为什么我的下拉菜单不适用于导航栏？

问题描述

1 个解决方案

解决方案1
1 2019-02-10 06:41:19

为什么我的下拉菜单不适用于导航栏？

问题描述

1 个解决方案

解决方案1 1 2019-02-10 06:41:19

解决方案1
1 2019-02-10 06:41:19