我有一个网站使用 css 媒体查询来检测浏览器分辨率并相应地修改我的网站。
我的主导航菜单遇到了一个小问题。在我的网站上有许多页面,我希望在加载移动分辨率时隐藏主导航,但在桌面分辨率上显示。
这似乎是一个很简单的任务,可以用 css 来完成,但不幸的是,对我来说,事实并非如此。我无法同时使用 display:none;
和 visibility:hidden;
因为当我的菜单在加载时检测到它是隐藏的,它会将它的高度设置为 0,并将不改变。
这是一个堆栈溢出页面引用: Setting a div to display:none; using javascript or jQuery
最终,我发现唯一可以在加载时隐藏我的菜单,同时仍允许菜单正确计算其高度的选项是以下 jQuery。
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
现在,此解决方案适用于我希望在加载所有屏幕分辨率时隐藏菜单的页面。但是,我有许多页面,我希望在这些页面上隐藏最初在移动设备加载时隐藏的菜单,但在桌面上显示。
我试图在 jsfiddle 中重新创建此场景:http://jsfiddle.net/WRHnL/15/
正如您在 fiddle 中所见,菜单系统存在很大问题,无法在页面加载时显示。有人对我如何完成这项任务有任何建议吗?
最佳答案
你可以通过比较屏幕尺寸来做到这一点:
$(document).ready(function () {
var width = $(window).width();
if (width < 768) {
$(".hide-menu").hide();
}
var $drillDown = $("#drilldown");
});
关于javascript - 使用 jQuery .hide() 和 CSS 媒体查询基于屏幕分辨率进行菜单切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18189763/