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点击功能后，整个导航栏消失

1 个答案: