将jQuery .hide（）与CSS媒体查询一起用于基于屏幕分辨率的菜单切换

Question

我有一个使用CSS媒体查询的网站来检测浏览器分辨率并相应地修改我的网站。

我的主导航菜单遇到了一个小问题。 我的网站上有很多页面，我希望在加载时针对移动分辨率隐藏主导航，而在桌面分辨率下显示。

这似乎是用CSS完成的一项简单任务，但不幸的是，事实并非如此。 我无法同时使用display:none; 和visibility:hidden; 因为当我的菜单在加载时检测到它是隐藏的时，它会将其高度设置为0，并且不会改变。

这是堆栈溢出页面参考： 将div设置为显示：无； 使用javascript或jQuery

最终，我发现的唯一选择是在加载时隐藏菜单，同时仍然允许菜单正确计算其高度，这是jQuery的以下方面。

$(document).ready(function () {
    $(".hide-menu").hide();
    var $drillDown = $("#drilldown");
});

现在，此解决方案适用于我希望在加载时针对所有屏幕分辨率最初隐藏菜单的页面。 但是，我想在许多页面上隐藏菜单，这些菜单最初在移动设备加载时隐藏，但在桌面上显示。

我试图在jsfiddle中重新创建此方案： http : //jsfiddle.net/WRHnL/15/

正如您在小提琴中看到的那样，菜单系统存在很大的问题，即页面加载时不显示。 有人对我如何完成此任务有任何建议吗？

Answer 1

您可以通过比较屏幕尺寸来做到这一点：

$(document).ready(function () {
    var width = $(window).width();
    if (width < 768) {
        $(".hide-menu").hide();
    }
    var $drillDown = $("#drilldown");
});

Answer 2

您可以使用！important通过媒体查询强制进入原始状态。 这将覆盖您的js中的“ display：none”。

例：

@media (max-width:980px){ 
nav  > .btn-group{display:none}
}

然后，您的Js切换style =“ display：block”或style =“ display：none”，以最大化窗口，并在下面重置您的原始样式。

@media (min-width: 992px) {
nav  > .btn-group{margin:0px auto; display:inline-block !important}
}