我有以下代码,用于在响应式网站中切换移动设备的菜单。
切换浏览器宽度小于500 px的菜单。
HTML:
<div class="mobile-button" style="display:none;">
<a href="javascript:void(0);" id="mobibtn">Menu</a>
</div>
<nav>
<div class="main-menu">
<div class="menu-inner">
<ul class="top-nav">
<li class="first"><a href="anchorfast-guard.html">ANCHORFAST GUARD<br><span>Oral Endotracheal Tube Fastener</span></a></li>
<li class="second"><a href="anchorfast.html">ANCHORFAST<br><span>Oral Endotracheal Tube Fastener</span></a></li>
<li><a href="clinical-benefits.html">CLINICAL BENEFITS</a></li>
<li><a href="testimonials.html">TESTIMONIALS</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
的jQuery
$(window).resize(function() {
var windowWidth = $(window).width();
if (windowWidth < 500) {
$('.main-menu').hide();
$('.mobile-button').show();
} else {
$('.main-menu').show();
$('.mobile-button').hide();
}
});
$(window).load(function() {
var windowWidth = $(window).width();
if (windowWidth < 500) {
$('.main-menu').hide();
$('.mobile-button').show();
} else {
$('.main-menu').show();
$('.mobile-button').hide();
}
});
$(document).ready(function() {
$('#mobibtn').click(function() {
$('.main-menu').toggle();
});
});
如果宽度小于500像素,单击移动按钮时会显示菜单,但会在调整大小时隐藏。如果菜单已经显示,我希望在调整大小时保持其可见性。
时可用答案 0 :(得分:0)
我建议您保存按钮的状态,以便在window.resize
事件处理程序中考虑其状态。类似的东西:
$('#mobibtn').data('state', false).click(function() {
//toggle the layout
$('.main-menu').toggle();
//toggle the saved state
$(this).data('state', !$(this).data('state'));
});
现在,您可以使用$("#mobibtn).data('state')
来确定是否点击了移动菜单按钮。