我正在尝试开发响应式顶部导航菜单，但我在使用汉堡菜单时遇到了一些麻烦。当我调整浏览器大小时单击汉堡包图标时，它不会执行任何操作。我的 html 上有 jquery，但由于某种原因调整浏览器大小时我无法关闭菜单。任何帮助将不胜感激。
这是我的代码:
$('.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>最佳答案
您的 nav-toggle 中存在一些问题click功能。
- 在您正在检查的情况下
margin-top对-225px的值(value)其他地方都是-255px我认为这是一个错字。 - 关于
max-width: 730px您添加的屏幕display: none至top-nav-links类(class)。您还需要在nav-toggle中切换它click功能。
你的最终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');
}
});
关于javascript - 为什么我的下拉菜单在导航栏上不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54613741/