1

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

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

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

这是堆栈溢出页面参考： 将 div 设置为 display:none; 使用 javascript 或 jQuery

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

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

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

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

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

4

2 回答 2

1

您可以使用 !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}
}
于 2014-02-23T04:52:14.563 回答
1

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

$(document).ready(function () {
    var width = $(window).width();
    if (width < 768) {
        $(".hide-menu").hide();
    }
    var $drillDown = $("#drilldown");
});
于 2013-08-12T15:28:43.093 回答