javascript - 使用 jQuery .hide() 和 CSS 媒体查询基于屏幕分辨率进行菜单切换

Question

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

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

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

这是一个堆栈溢出页面引用: Setting a div to display:none; using javascript or jQuery

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

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

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

我试图在 jsfiddle 中重新创建此场景:http://jsfiddle.net/WRHnL/15/

正如您在 fiddle 中所见，菜单系统存在很大问题，无法在页面加载时显示。有人对我如何完成这项任务有任何建议吗？

Answer 1

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

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