当我重新调整浏览器的大小以查看移动菜单时,一旦我打开菜单,使浏览器变大,它就不会将菜单恢复到原始状态,即全宽。它与移动视图保持一致
段:
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
nav {
background: #f0f0f0;
border: 1px solid #ccc;
border-right: none;
width: 100%;
margin-bottom: 20px;
}
nav ul {
margin: 0;
padding: 0;
width:100%;
}
nav ul li {
list-style: none;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: inline-block;
text-decoration: none;
color: #616161;
padding: 10px 0;
}
nav {
display: table;
table-layout: fixed;
}
ul {
display: flex;
flex-direction: row;
}
ul li {
flex-grow: 1;
}
nav a#pull {
display: none;
}
@media (max-width: 430px) {
nav {
font-size: .8em;
}
ul {
display: block;
}
nav ul li {
display: block;
border-bottom: 1px solid #ccc;
}
nav a#pull {
height: auto;
display: block;
background-color: ##ccc;
width: 100%;
position: relative;
text-align: center;
}
nav a#pull:after {
content:"";
background: url('images/nav-icon.png') no-repeat;
width: 30px;
height: 20px;
position: absolute;
right: 15px;
top: 10px;
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="jobs.html">Jobs</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
答案 0 :(得分:0)
这是一个包含更新版本jquery的代码段。它似乎有效。
String a = "Hello World";
String a = "1234";
String a = "%%";
&#13;
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
&#13;
nav {
background: #f0f0f0;
border: 1px solid #ccc;
border-right: none;
width: 100%;
margin-bottom: 20px;
}
nav ul {
margin: 0;
padding: 0;
width:100%;
}
nav ul li {
list-style: none;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: inline-block;
text-decoration: none;
color: #616161;
padding: 10px 0;
}
nav {
display: table;
table-layout: fixed;
}
ul {
display: flex;
flex-direction: row;
}
ul li {
flex-grow: 1;
}
nav a#pull {
display: none;
}
@media (max-width: 430px) {
nav {
font-size: .8em;
}
ul {
display: block;
}
nav ul li {
display: block;
border-bottom: 1px solid #ccc;
}
nav a#pull {
height: auto;
display: block;
background-color: ##ccc;
width: 100%;
position: relative;
text-align: center;
}
nav a#pull:after {
content:"";
background: url('images/nav-icon.png') no-repeat;
width: 30px;
height: 20px;
position: absolute;
right: 15px;
top: 10px;
text-align: center;
}
}
&#13;