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/

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

Entire nav bar disappearing after jQuery click function in responsive site

css

jquery

nav

media-queries