Javascript jQuery.slideToggle，显示：无

我有一个逻辑问题。我有一个CSS下拉菜单，当浏览器或手机的宽度小于690pixles时，它就变成了一个只显示在切换上的菜单。即，用户需要按下按钮来显示菜单。但是，一个逻辑问题是，如果调整浏览器的大小，将菜单切换为打开，然后再次关闭并将浏览器调整为全宽，则正常菜单将消失，因为滑动切换会添加显示：无；将样式设置为div元素-这会导致布局问题，对用户不是很友好。有没有办法解决这个问题

HTML:

---

您可以在调整窗口大小时显示和隐藏它，以便确保菜单在大屏幕中始终可见，而在小屏幕中始终不可见

$( window ).resize(function() {
    if($( window ).width() >= 690) {
        $("#responsive").show();
    }
    else {
        $("#responsive").hide();
   }
});

$(".menu-toggle").click(function(){
    $("#responsive").slideToggle( "slow", function() {});
});

$( window ).resize(function() {
    if($( window ).width() >= 690) {
        $("#responsive").show();
    }
    else {
        $("#responsive").hide();
   }
});