调整大小后导航消失答案

【问题标题】：Nav disappears after resize调整大小后导航消失
【发布时间】：2012-12-21 03:02:47
【问题描述】：

我正在为此站点构建一个可折叠的导航，并注意到在它折叠后，如果您展开和缩回它并再次放大窗口，导航就会消失。我尝试将显示更改为阻止我的媒体查询，但我认为 jQuery 正在覆盖它。知道是什么原因造成的吗？

另外，我希望箭头在单击时旋转 180 度，我该如何定位它？我的jQuery如下：

/* toggle nav */
$("#menu-icon").on("click", function(){
$(".nav").slideToggle();
$(this).toggleClass("active");
});

【问题讨论】：

【解决方案1】：

$(".nav").slideToggle(); 似乎将导航置于display:none; 状态。当您尝试在媒体查询中设置display:block; 时，您是否使用了!important？

编辑

如果您的屏幕尺寸小于 570px 需要切换，那么您需要确保在任何大于 570px 的尺寸下，它都会在 CSS 中设置为 display:block;

@media (min-width:571px) {
    .nav { display:block!important; }
}

这应该充分覆盖显示属性。

【讨论】：

是的，我试过了，但是切换功能是偏移的，它只是在展开后切换回来。
您在较小版本的媒体查询中正确排除了 !important 声明？
啊，没试过，我早上试一试，如果不起作用，重新打开问题。感谢您的意见！
在查看了更多样式表之后，我认为这就是问题所在。对于此元素，您的媒体查询相互矛盾，这将要求您的媒体查询是互斥的。例如，您可以使用@media (min-width:500px) and (max-width:800px) 来扩展媒体查询的精度。
是的，在尝试并失败后，我认为这也是问题所在。我对如何构建这些内容有点困惑，你能告诉我你认为我的媒体查询在我的 3 个断点下可能是什么样子吗？

【解决方案2】：

在style.css，行号。 1015，用于max-width:820px的媒体查询

@media (max-width: 820px)

【讨论】：