-1

我有以下代码用于在响应式站点中切换移动设备的菜单。

它将菜单切换为小于 500 像素的浏览器宽度。

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 像素的宽度，当单击移动按钮时，它会显示菜单，但在调整大小时会隐藏。如果菜单已经显示，我想在调整大小时保持其可见性。

可在http://anchorfast1.com/test/index.html获得

4

1 回答 1

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')来确定是否单击了移动菜单按钮。

于 2013-11-13T20:00:08.953 回答