[英]Using jQuery .hide() with CSS media queries for menu toggle based on screen resolution
I have a website using css media queries to detect browser resolution and modify my site accordingly. 我有一个使用CSS媒体查询的网站来检测浏览器分辨率并相应地修改我的网站。
I have run into a slight problem with my main navigation menu. 我的主导航菜单遇到了一个小问题。 There are a number of pages on my site where I would like to have my main navigation hidden on load for mobile resolutions, but displayed on desktop resolutions.
我的网站上有很多页面,我希望在加载时针对移动分辨率隐藏主导航,而在桌面分辨率下显示。
This seems like a simple enough task to accomplish with css, but unfortunately for me, it is not. 这似乎是用CSS完成的一项简单任务,但不幸的是,事实并非如此。 I am unable to use both
display:none;
我无法同时使用
display:none;
and visibility:hidden;
和
visibility:hidden;
because when my menu detects on load that it is hidden, it sets it's height to 0, and will not change. 因为当我的菜单在加载时检测到它是隐藏的时,它会将其高度设置为0,并且不会改变。
Here is a stack overflow page reference: Setting a div to display:none; 这是堆栈溢出页面参考: 将div设置为显示:无; using javascript or jQuery
使用javascript或jQuery
Ultimately, I the only option I found that would hide my menu on load, while still allowing the menu to correctly calculate it's height was the following bit of jQuery. 最终,我发现的唯一选择是在加载时隐藏菜单,同时仍然允许菜单正确计算其高度,这是jQuery的以下方面。
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
Now, this solution is working for pages that I would like to have the menu initially hidden on load for all screen resolutions. 现在,此解决方案适用于我希望在加载时针对所有屏幕分辨率最初隐藏菜单的页面。 However, I have a number of pages on which I would like to have the menu hidden initially hidden on load for mobile, but displayed on desktop.
但是,我想在许多页面上隐藏菜单,这些菜单最初在移动设备加载时隐藏,但在桌面上显示。
I have attempted to recreate this scenario in a jsfiddle: http://jsfiddle.net/WRHnL/15/ 我试图在jsfiddle中重新创建此方案: http : //jsfiddle.net/WRHnL/15/
As you can see in the fiddle, the menu system has big issue with not being displayed on page load. 正如您在小提琴中看到的那样,菜单系统存在很大的问题,即页面加载时不显示。 Does anyone have any suggestions on how I might accomplish this task?
有人对我如何完成此任务有任何建议吗?
You can do it by comparing the screen-size: 您可以通过比较屏幕尺寸来做到这一点:
$(document).ready(function () {
var width = $(window).width();
if (width < 768) {
$(".hide-menu").hide();
}
var $drillDown = $("#drilldown");
});
You can use !important to force to origional state via media queries. 您可以使用!important通过媒体查询强制进入原始状态。 This will over-ride the "display:none" from your js.
这将覆盖您的js中的“ display:none”。
Example: 例:
@media (max-width:980px){
nav > .btn-group{display:none}
}
Your Js then toggles style="display:block" or style="display:none" you maximize the window and the below resets your origional style. 然后,您的Js切换style =“ display:block”或style =“ display:none”,以最大化窗口,并在下面重置您的原始样式。
@media (min-width: 992px) {
nav > .btn-group{margin:0px auto; display:inline-block !important}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.