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

Using jQuery .hide() with CSS media queries for menu toggle based on screen resolution

本文关键字：屏幕 于屏幕 分辨率 菜单 一起 hide jQuery CSS 媒体 查询 用于      更新时间：2023-09-26

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

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

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

以下是堆栈溢出页引用：将div设置为显示：none；使用javascript或jQuery

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

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

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

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

正如你在小提琴中看到的，菜单系统有一个很大的问题，不能在页面加载中显示。有人对我如何完成这项任务有什么建议吗？

您可以通过比较屏幕大小来实现：

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

您可以使用！通过媒体查询强制返回原始状态非常重要。这将超越js中的"display:none"。

示例：

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

然后Js切换style="display:block"或style="dispay:none"你最大化窗口，下面的重置你原来的风格。

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