我有一个响应式菜单，在响应式模式下，您可以使用 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>最佳答案
enquire.register("screen and (max-width: 873px)", {
match: function () {
// do something if condition is true
},
unmatch: function () {
// check if navbar was closed
if (!$("#navbar").is(":visible"))
{
// then open it again
$("#navbar").toggle(500);
}
},
// make this execute on start
deferSetup: true
})
测试片段全屏运行并调整浏览器大小
$(document).ready(function() {
$(".navbar-toggle").click(function(event) {
event.stopPropagation();
$("#navbar").toggle(500);
});
enquire.register("screen and (max-width: 872px)", {
match: function () {
// if you want to do something when it is true
},
unmatch: function () {
// check if navbar is not visible
if (!$("#navbar").is(":visible")) {
// then show it again
$("#navbar").toggle(500);
}
},
// make this execute on start
deferSetup: true
});
});@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;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.6/enquire.min.js"></script>
<!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>
</body>
</html>希望对你有帮助
关于jquery - 当我在响应模式下切换菜单时，菜单会隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46418732/