【发布时间】：2025-12-28 07:45:10
【问题描述】：
我有一个响应式菜单，在响应式模式下，您可以使用 jquery 中的按钮切换它。问题是当我使屏幕变小并切换菜单（打开和关闭它）时，当我返回桌面模式时菜单仍然保持隐藏状态，这次没有按钮可以切换它，因为它处于桌面模式并且没有任何东西可以切换它.只有当您刷新页面菜单时才会返回。
我试过了：
@media screen and (min-width:873px) {
#navbar{
visibility: visible;
display: block;
}
}
还有这个：
@media screen and (max-width:873px) {
#navbar{
visibility: visible;
display: block;
}
}
它们都不起作用。我怎么解决这个问题？使用 css 或 jquery 可能吗？
我用于切换菜单的 jquery 代码：
$(document).ready(function(){
$(".navbar-toggle").click(function(){
$("#navbar").toggle(500);
});
});
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: 'PT Sans', Arial, Verdana;
background-color: #eee;
}
h1 {
text-align: center;
font-size: 48px;
text-transform: uppercase;
letter-spacing: 3px;
color: #222;
}
.menu {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 120px;
margin: auto;
position: relative;
background-color: #2c3e50;
z-index: 7;
}
.menu li {
float: left;
width: 25%;
height: 100%;
margin: 0;
padding: 0;
}
.menu a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #fff;
text-decoration: none;
position: relative;
font-size: 18px;
z-index: 9;
}
a.active {
background-color: #e74c3c;
pointer-events: none;
}
.navbar-toggle{
display: none;
}
@media screen and (max-width:872px) {
.menu {
margin-top: 0;
height: 300px;
display: none;
position: relative;
}
.menu li {
float: right;
width: 100%;
height: 14%;
margin: 0;
padding: 0;
}
.res-menu{
display: block;
}
.navbar-toggle{
display: block;
margin-top: 15px;
margin-right: 15px;
}
.nav-logo{
display: none;
}
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>css3 Responsive menu effect</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<button type="button" class="navbar-toggle">
<span class="big-font"><i class="fa fa-bars" aria-hidden="true"></i></span>
</button><div class="clearfix"></div>
<ul class="menu" id="navbar">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar-toggle").click(function(){
$("#navbar").toggle(500);
});
});
</script>
</body>
</html>【问题讨论】：
-
为您的问题创建一个 jsfiddle 演示
标签： jquery css responsive-design