如何使用 Jquery 让导航菜单切换开始关闭

Question

我已经使用 jQuery 构建了自己的响应式导航菜单，并且它在一定程度上可以工作，我遇到的问题是，在移动屏幕上查看它时，菜单总是开始打开。除了这个问题之外，切换功能和导航都可以正常工作。

这里是网站的链接http://www.visuallycreative.co.uk

如果您将浏览器窗口缩小到移动大小然后刷新浏览器，菜单开始打开，我需要它开始关闭，然后在切换时打开。

jQuery

$(document).ready(function() {
    $(window).on('resize', function() {
        if ($(window).width() <= 640) {
            $('.navbar').hide();
        } else {
            $('.navbar').show();
        }
    });
    $('.toggle').on('click', function() {
        $('.navbar').slideToggle('slow');
    });
}); 

Answer 1

见下文，我没有添加.hide()，而是触发了resize 事件，所以它只会像你问的那样隐藏在移动设备上......基本上我是在告诉窗口假装它已经调整大小当文档准备好后，.on("resize") 中的任何代码都将被执行:)

$(document).ready(function() {

  $(window).on('resize', function() {
     if ($(window).width() <= 640 ) {
        $('.navbar').hide();
     }   else {
        $('.navbar').show();
     }
  }).trigger("resize");

  $('.toggle').on('click', function() {
     $('.navbar').slideToggle('slow');
  });

});

Answer 2

只需添加$('.navbar').hide(); 作为第一行。您只是告诉窗口在调整大小时执行这些操作，并且最初加载的页面不是调整大小。所以，第一行应该是隐藏导航栏。