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/

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

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}
}

使用jQuery .hide（）和CSS媒体查询，根据屏幕分辨率进行菜单切换

2 个答案: