Html 调整屏幕大小时导航菜单没有正确响应

这是一个我仍在研究的问题，来自我之前发布的一个问题，但还没有解决，我觉得我需要更清楚

我有一个基本的响应导航栏，在执行以下过程后不会重新显示主导航

1） 缩小导航并打开响应导航

2） 使用按钮关闭响应导航

3） 重新打开浏览器至全宽

4） 原来的导航链接仍然隐藏着！除非你刷新屏幕，否则我无法让它们显示出来

这是我的小提琴

如果您能帮忙，请更新小提琴

谢谢

---

这就是你要找的吗

---

希望它能帮助您以这种方式编写js

var $window = $(window),
    $html = $('html');

 function resize() {

    if ($window.width() < 480) {


  $("#toggle-nav").click(function () {
       $("#nav").slideToggle('slow');
   });

    //  

    }else{
 $("#nav").slideUp();// if its not worked write your code   
  }

}

$window
    .resize(resize)
    .trigger('resize');

});

var$window=$（window），
$html=$（'html'）；
函数resize（）{
如果（$window.width（）<480）{
$（“#切换导航”）。单击（函数（）{
$（“#导航”）.slideToggle（'slow'）；
});
//  
}否则{
$（“#nav”）.slideUp（）；//如果不起作用，请编写代码
}
}
$window
.调整大小（调整大小）
.trigger（'resize'）；
});

给我发一张你最后看到的东西的截图

.toggleMenu {
display: none;
background: #ed1b2f;
padding: 10px 0;
color: #000;
text-transform: uppercase;
font-weight: bold;
margin: 15px 0 0 0;
width:100%;
text-align:center;
}

var $window = $(window),
    $html = $('html');

 function resize() {

    if ($window.width() < 480) {


  $("#toggle-nav").click(function () {
       $("#nav").slideToggle('slow');
   });

    //  

    }else{
 $("#nav").slideUp();// if its not worked write your code   
  }

}

$window
    .resize(resize)
    .trigger('resize');

});