使用jQuery显示/隐藏移动菜单

时间:2013-11-13 19:55:18

标签: jquery

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

切换浏览器宽度小于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像素,单击移动按钮时会显示菜单,但会在调整大小时隐藏。如果菜单已经显示,我希望在调整大小时保持其可见性。

http://anchorfast1.com/test/index.html

时可用

1 个答案:

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