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

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

这里是该网站的链接

如果将浏览器窗口缩小到手机大小，然后刷新浏览器，菜单开始打开，我需要它开始关闭，然后打开切换

jQuery

$（文档）.ready（函数（）{
$（窗口）.on（'resize'，function（））{
如果（$（window）.width（）只需添加
$（'.navbar'）.hide（）；
作为第一行。您只是告诉窗口在调整大小时执行这些操作，并且最初加载的页面不是调整大小。因此，第一行应该是隐藏navbar。
请参见下文，而不是添加
.hide（）
我触发了
调整大小
事件，因此它只会像您要求的那样隐藏在手机上……基本上，我告诉窗口在文档准备好时假装它已调整大小，因此
中的任何代码（“调整大小”）
将被执行：）

$（文档）.ready（函数（）{
$（窗口）.on（'resize'，function（））{
if（$（window）.width（）不是严格正确的答案；因为它会将
.navbar
也隐藏在
>640px
上，这似乎是不需要的：）不，不起作用！菜单仍在扩展，在浏览器刷新时显示所有菜单项。很抱歉，但它确实起作用：……我还在您自己的网站上编辑了您的代码，添加了
。触发器（“resize”）
，它在那里也起作用了……对于JS小提琴，您可以将
结果
框调整为640px，然后按“播放”要看到它的实际作用：
$(document).ready(function() {
    $(window).on('resize', function() {
        if ($(window).width() <= 640) {
            $('.navbar').hide();
        } else {
            $('.navbar').show();
        }
    });
    $('.toggle').on('click', function() {
        $('.navbar').slideToggle('slow');
    });
}); 

$(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');
  });

});