jquery .hide() 函数 - 隐藏手机，显示桌面答案

【问题标题】：jquery .hide() function - Hide mobile, Display Desktopjquery .hide() 函数 - 隐藏手机，显示桌面
【发布时间】：2013-08-10 03:21:24
【问题描述】：

我会尽力设置我的场景，以便您理解我的问题。

我的网站目前正在利用 CSS 媒体查询来跨越屏幕分辨率。我有一个无法在页面加载时隐藏的主向下钻取菜单，否则菜单将无法正确计算其高度，并且无法正确显示。

作为一种在需要时仍然能够隐藏此菜单的方法，我找到了一种解决方法，可以隐藏菜单，但仍允许菜单正确计算其在页面加载时的高度。

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

这对于不需要在移动和桌面分辨率上初始显示主菜单的页面非常有用。但是，对于我的产品页面，此解决方案将不起作用。我需要菜单在加载时隐藏移动分辨率，但也需要在加载时显示桌面分辨率。谁能想到一个可行的解决方案？我难住了。这是 HTML：

<div class="drill-down-wrapper hide-menu hide-on-load hide-pd-page">
    <div id="drilldown-breadcrumbs" class="breadcrumbs skin-colorful"></div>
    <div id="drilldown" class="skin-colorful">
        <!-- #Include virtual="Menu.txt" -->
    </div>
</div>

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

使用媒体查询根据屏幕分辨率隐藏和显示菜单。

【讨论】：

对不起，如果我在描述中不清楚。显示：无；并显示：隐藏；不是我的选择。它们导致菜单无法正确计算其高度。据我所知，.hide() 没有 CSS
@AlexRitter hide() 等同于display: none
如果您想保留高度，请使用可见性：隐藏；
该死。我的意思是显示：无；和可见性：隐藏；两者都不是我的选择。它们都导致菜单无法计算正确的高度。 jQuery 在初始加载后将其隐藏起来，这就是它起作用的原因，而 css 却没有。
肯定有其他检测操作系统或设备的方法，但它们要困难得多。我会四处搜索并尝试为您找到最佳选择。应该有一种方法可以完成您使用 CSS 所做的事情，但如果没有要检查的网站，我真的无法帮助您。

【解决方案2】：

尝试使用 CSS 来显示/隐藏元素，而不是 jQuery。您可以使用display 规则来执行此操作。举个例子：

.hide-menu-on-load {
  display: none;
}

@media screen and (max-width: 680px) {
  .hide-menu-on-load {
    display: block;
  }
}

注意：display: none 从页面流中删除了该元素。 visibility: hidden 将元素的流保留在页面上，但只需将其从视图中移除

【讨论】：

对不起，如果我在描述中不清楚。显示：无；并显示：隐藏；不是我的选择。它们会导致菜单无法正确计算其高度。