Javascript 响应式设计中的菜单栏消失

我正在开发一个响应性设计模板，其中水平菜单栏将转换为图标以节省空间。基本上，我创建了3个媒体查询，即>800px，介于500到800px之间，小于500px。

它工作正常，但当屏幕的窗口宽度达到484px到500px时，菜单栏就消失了！您可以转到链接以查看测试页面：

我怀疑问题出在我的javascript文件中。我已附上代码供您阅读：

---

我希望有一种方法可以显示这些范围之间的菜单。

screen\u layout\u large.css css文件中的媒体查询隐藏了移动菜单。编辑媒体查询以提供最小宽度，或在changeNav功能中显示移动菜单，如下所示

function changeNav() {
    if (windowSize == "large") {
        $("nav").css("height", "auto");
    }
    else if (windowSize == "medium") {
        $("nav").css("height", "auto");
    }
    else if (windowSize == "small") {
        $("nav").css("height", "0px");
        $("a.mobile_menu").show().removeClass("selected");//load in the first image of the mobile     menu when you resize to small 
    }
}

---

谢谢你的及时回复。对不起，我不太明白你的意思。我的screen_layout_large.css职责是隐藏所有屏幕大小的菜单。在screen_layout_large.css中找到的唯一代码是：/*从所有屏幕大小隐藏移动菜单*/a.mobile_菜单{display:none；}尽管我已经对此进行了注释，但问题仍然存在，即菜单在484px到500px的范围内消失。奇怪。添加。显示不起作用$a、 已选择mobile_menu.show.removeclass；现在，我无法复制这个问题。看起来你改变了一些事情，解决了这个问题。

function changeNav() {
    if (windowSize == "large") {
        $("nav").css("height", "auto");
    }
    else if (windowSize == "medium") {
        $("nav").css("height", "auto");
    }
    else if (windowSize == "small") {
        $("nav").css("height", "0px");
        $("a.mobile_menu").show().removeClass("selected");//load in the first image of the mobile     menu when you resize to small 
    }
}