Jquery 为什么我的汉堡包导航在桌面模式下不加载？

我正在为我的高中编写一个网站，我正在为网站使用汉堡包导航。当网站缩小到移动模式时，汉堡包就会加载，一切正常。但是，如果我关闭汉堡包并将网站恢复到桌面模式，导航将消失，因为

标记将更改为

display=“none”我找不到修复它的方法


$（文档）.ready（函数（）{
$（“.hamburger”）。单击（函数（）{
$（“nav>ul”）。滑动切换（800）；
})
});
nav{
宽度：100%；
最小高度：50px；
浮动：左；
字体系列：“TT Pines粗体斜体演示”；
字号：18px；
背景：#444；
文本对齐：居中；
显示：块；
排名：0；
位置：固定；
z指数：10；
}
导航>ul{
填充：0；
列表样式：无；
溢出：隐藏；
保证金：0；
}
导航>ul>li{
显示：内联；
线高：50px；
}
导航>ul>li>a{
文字装饰：无；
颜色：#fff；
填充：25px 17px；
文本转换：大写；
字体大小：20px；
字母间距：2px；
字体系列：“开放式Sans压缩”，无衬线；
}
a:悬停{
文字装饰：无；
颜色：#efb60b；
}
@仅介质屏幕和（最大宽度：320px）{
导航{
宽度：100%；
浮动：左；
文本对齐：居中；
}
导航>ul{
边缘顶部：50px；
填充：0；
显示：块；
列表样式：无；
}
nav>ul>li，
导航>ul>li>a{
线高：50px；
显示：列表项；
左边距：0；
}
.汉堡包{
填充：20px；
显示：块；
浮动：左；
文本对齐：居中；
颜色：#fff；
字体大小：24px；
光标：指针；
}
}
@仅介质屏幕和（最小宽度：320px）和（最大宽度：768px）{
导航{
宽度：100%；
浮动：左；
文本对齐：居中；
}
导航>ul{
边缘顶部：50px；
填充：0；
显示：块；
列表样式：无；
}
nav>ul>li，
导航>ul>li>a{
线高：50px；
显示：列表项；
左边距：0；
}
.汉堡包{
填充：20px；
显示：块；
浮动：左；
文本对齐：居中；
颜色：#fff；
字体大小：24px；
光标：指针；
}
}









首先，汉堡图标确实会出现在宽屏上。然而，它的样式仅适用于小屏幕，因此在宽屏幕上，它居中且为黑色，在深灰色背景上不容易看到

第二，您呈现的用例（在小屏幕上打开站点，隐藏菜单，然后加宽屏幕）在测试环境之外并不常见，因此这不是一个很大的问题。但是，您可以通过新的媒体查询来解决此问题：

@media only screen and (min-width: 768px) {
  nav>ul {
    display: block!important; /* This forces the browser to apply this rule and show the menu, even if the inline css says to hide it */
  }
  nav>.hamburguer {
    display: none; /* This hides the hamburguer icon */
  }
}

所以我想声明，除非满足指定的维度，否则css是隐藏的。由于“全屏”模式不在这些维度下，css不适用

@media only screen and (max-width: 768px) and (min-width: 320px)
js:94
.hamburger {
padding: 20px;
display: block;
float: left;
text-align: center;
color: #fff;
font-size: 24px;
cursor: pointer;
}

这是在“移动”模式下，为上述所有内容使用另一个媒体参数时应用的内容（
最大宽度：768px
，
最小宽度：320px
）

PS：你做得很好，坚持下去。
你在使用bootstrap吗？使用
toggleClass
而不是
slideToggle
，并定义一个
hide
css类，该类隐藏
ul
，但仅用于移动设备（使用媒体查询）。@Cheshire否，我在使用Jquery。我从这个链接使用它，我想一定有一些更相关的代码，可能是一些CSS媒体查询。。。是什么让桌面导航和汉堡包菜单之间发生了变化？我指的是Bootstrap的CSS，而不是javascript/jqueryThank！我终于可以放松了。克里斯托弗非常感谢你的帮助，但没有成功。但谢谢你让我走得更近了