我正在做一个响应式网页设计，但我在使用 jquery 时遇到了这个问题。每当我尝试在移动尺寸下打开我的菜单时，它只会打开一秒钟，然后甚至在我可以单击菜单按钮之前快速关闭。当我将 .css('display', '') 更改为 .css('display', '500') 时，菜单可以工作，但问题是当我关闭移动菜单时，我的完整桌面网站导航菜单没有展示。我该如何解决这个问题，以便我的导航栏在移动设备以及桌面和平板电脑 View 中正常工作？
我单独保存了我的手机/平板电脑/桌面 .css 文件，而不是制作@media，如果可能的话，我更愿意保持这种方式。 (如果您对代码有任何疑问，请随时提出，提前感谢您花时间帮助我解决这个问题。)
jQuery(document).ready(function() {
jQuery(".menubutton").click(function() {
jQuery(".nav-menu").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '')
//the number next to 'display' '' can be turned into 1 but then the menu of desktop doesn't show
});
});
});@charset "utf-8";
/* cssphone */
.menubutton {
display: block;
position: relative;
background-color: orange;
text-align: center;
padding: 15px;
font-size: 20pt;
font-size: 6vw;
cursor: pointer;
}
/* Navigation java*/
.nav-expanded {
display: block;
}
/* Navigation java end*/
.nav-menu {
display: none;
}
nav ul {
display: block;
list-style: none;
padding: 0;
margin: 0;
text-align: center;
position: relative;
background-color: #680000;
}
nav ul li {
display: inline-block;
box-sizing: border-box;
width: 100%;
border-bottom: 1px black dashed;
}
nav ul li:hover {
background-color: #ff0000;
}
nav ul li:active {
border-bottom: 3px #fff dashed;
background-color: #ff0000;
}
.currentnav {
border-bottom: 3px #fff dashed;
background-color: #ff0000;
}
nav ul li a {
display: block;
padding: 15px;
color: white;
text-decoration: none;
box-sizing: border-box;
font-size: 20pt;
font-size: 6vw;
font-weight: bold;
}
nav ul li:last-child {
border-bottom: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
display: block;
position: relative;
background-color: #680000;
width: 100%;
text-align: left;
list-style: none;
}
nav ul ul li {
display: block;
text-align: center;
}
nav ul ul li:hover {
color: white;
background-color: #ff0000;
}
/* css phone ends */
/* css desktop */
@charset "utf-8";
.menubutton {
display: none;
width: 100%;
box-sizing: border-box;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
position: relative;
background-color: #680000;
}
nav ul li {
display: inline-block;
}
nav ul li:hover {
background-color: #ff0000;
}
nav ul li:active {
border-bottom: 3px #fff solid;
background-color: #ff0000;
}
.currentnav {
border-bottom: 3px #fff solid;
background-color: #ff0000;
}
nav ul li a {
display: block;
padding: 15px;
color: white;
text-decoration: none;
font-size: 20pt;
font-weight: bold;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
background-color: #680000;
min-width: 150px;
text-align: left;
border-top: 0;
margin: 0 0 0 -2px;
}
nav ul ul li {
display: block;
border: 1px solid black;
text-align: center;
}
nav ul ul li:hover {
color: white;
background-color: #ff0000;
}
/* css desktop ends */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYLE html>
<html class="html" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="cssdesktop.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1px) and (max-width: 599px)" href="cssphone.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 600px) and (max-width: 960px)" href="csstablet.css">
<link rel="icon" type="image/png" href="images/logo%2016x16.png" alt="16x16logo">
<link rel="shortcut icon" type="image/png" href="images/logo%2016x16.png">
<script type="text/javascript" src="jsfiles/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="jsfiles/script.js"></script>
</head>
<body class="homepage" link="orange" vlink="blue" alink="yellow">
<div class="menubutton">MENU</div>
<nav class="nav-menu">
<ul>
<li class="currentnav"><a href="index.html">Home</a></li><li>
<a href="Gamin'_News.html">News</a>
<ul>
<li><a href="Latest_Gamin'_News.html">LGN</a></li>
<li><a href="Games_Coming_Out_requirements.html">Games Coming out/Requirements</a></li>
<li><a href="Technology_News.html">Technology News</a></li>
</ul>
</li><li>
<a href="Gameplay.html">Gameplay</a>
<ul>
<li><a href="Counter_Strike_Global_Offensive.html">CS</a></li>
<li><a href="The_Elder_Scrolls_Online_Tamriel_Unlimited.html">TESO</a></li>
<li><a href="Other_Games.html">Other Games</a></li>
</ul>
</li><li>
<a href="F.A.Q..html">F.A.Q.</a>
<ul>
<li><a href="Cookies.html">Cookies</a></li>
</ul>
</li><li>
<a href="About.html">About</a>
<ul>
<li><a href="Who_am_I.html">Who am I?</a></li>
<li><a href="Facebook.html">Facebook</a></li>
<li><a href="Twitch.html">Twitch</a></li>
<li><a href="Youtube.html">Youtube</a></li>
</ul>
</li><li>
<a href="Contact.html">Contact</a></li>
</ul>
</nav>
</body>
</html>最佳答案
我已经在 jsFiddle 中重新创建了您的代码:https://jsfiddle.net/k4zL1rap/ 我不得不更改一些 css 属性以显示 block 以便我可以看到导航，但问题出在下面的代码中:
.css('display', '') 您已经在显示带有类切换的 block ，因此额外的显示随后会删除显示值，因为您在 js 中有一个空字符串。此外，该行的末尾应该有一个分号以供将来引用。
关于javascript - 响应式移动导航栏(导航)jquery/javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33312685/