我会尽力设置我的场景,以便您能够理解我的问题。
我的网站目前正在利用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>
使用媒体查询根据屏幕分辨率隐藏和显示菜单。
不要使用jQuery,而是尝试使用CSS来显示/隐藏元素。您可以使用display
规则来执行此操作。例如:
.hide-menu-on-load {
display: none;
}
@media screen and (max-width: 680px) {
.hide-menu-on-load {
display: block;
}
}
注意:display: none
从页面流中删除了该元素。visibility: hidden
将元素的流保留在页面上,但只需将其从视图中删除即可