响应站点中jQuery单击功能后，整个导航栏消失

我正在制作一个反应灵敏的网站，当只在小屏幕上观看时，它有一个可折叠的导航条

我遇到的问题是，当我在点击菜单打开和关闭后调整屏幕时，它消失了。这只会影响极少数人，他们可能会经常调整浏览器大小并单击菜单

从逻辑上讲，我肯定遗漏了什么，但我无法理解

HTML:

jQuery：

$(function(){

    "use strict";

        $("#menu").click(function(){ 
            if ($("#slide").css("display") === "block") {
                $("#slide").css({ "display": "none" });
            }
            else if($("#slide").css("display") === "none") {
                $("#slide").css({ "display": "block" });
            }
        }
    );
});

---

按如下方式更改脚本：

     $(function () {
  $("#menu").click(function () {
    if ($("#slide").is(':hidden')) {
      $("#slide").show();
    } else {
      $("#slide").hide();
    }
  });
  $(window).resize(function () {
    if ($(window).width() > 500) {
      $("#slide").show();
    } else {
      $("#slide").hide();
    }
  });
});

---

请参阅jsfiddle:

jquery css函数覆盖css样式。当屏幕再次变大时，是否有方法可以将其反转？只有使用JavaScription，您才能更具体一些？如果需要，我愿意对整个函数使用JavaScript。

$(function(){

    "use strict";

        $("#menu").click(function(){ 
            if ($("#slide").css("display") === "block") {
                $("#slide").css({ "display": "none" });
            }
            else if($("#slide").css("display") === "none") {
                $("#slide").css({ "display": "block" });
            }
        }
    );
});

     $(function () {
  $("#menu").click(function () {
    if ($("#slide").is(':hidden')) {
      $("#slide").show();
    } else {
      $("#slide").hide();
    }
  });
  $(window).resize(function () {
    if ($(window).width() > 500) {
      $("#slide").show();
    } else {
      $("#slide").hide();
    }
  });
});