jquery .hide（）函数-隐藏移动设备，显示桌面

Question

我将尽力设置自己的方案，以便您可以理解我的问题。

我的网站目前正在利用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>

Answer 1

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

Answer 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使元素在页面上保持流动，而只是将其从视图中删除