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

Question

我正在制作一个仅在小屏幕上查看时具有可折叠导航栏的响应式网站。

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

从逻辑上讲，我一定缺少某些东西，但无法弄清楚。

HTML：

    <nav id="mainNav">
        <img id="menu" src="menu.png" alt="menu icon" width="50" />
        <ul id="slide">
            <li><a href="#news">News</a></li>
            <li><a href="#calendar">Calendar</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#sponsors">Sponsors</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

CSS：

#mainNav {
    background-color: #333;
    width: 100%;
    z-index: 500;
}

#menu {
    display: none;
}

@media screen and (max-width: 500px) {

    #menu {
        display: block;
    }

    #slide {
        display: none;
    }

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" });
            }
        }
    );
});

Answer 1

像这样修改脚本：

     $(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：https://jsfiddle.net/b7v14zkf/