jQuery 如果屏幕小于特定宽度，则隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4296012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide div if screen is smaller than a certain width
提问by dzul
I want to hide a floating div if the user screen is < 1024px as it will overlay with my blog content area. I found this jQuery on the net but I am not sure how to use it.
如果用户屏幕小于 1024 像素，我想隐藏一个浮动 div，因为它将与我的博客内容区域重叠。我在网上找到了这个 jQuery，但我不知道如何使用它。
$(document).ready(function() {
if ((screen.width>1024)) {
// if screen size is 1025px wide or larger
$(".yourClass").css('display', 'none'); // you can also use $(".yourClass").hide();
}
elseif ((screen.width<=1024)) {
// if screen size width is less than 1024px
$(".yourClass").css('display', 'block'); // here you can also use show();
}
});
If my floating div class name is sharecontent, should I replace the above script like below? If yes, it's not working.
如果我的浮动 div 类名是 sharecontent，我应该像下面那样替换上面的脚本吗？如果是，它不起作用。
$(document).ready(function() {
if ((screen.width>1024)) {
// if screen size is 1025px wide or larger
$(".sharecontent").css('display', 'none'); // you can also use $(".yourClass").hide();
}
elseif ((screen.width<=1024)) {
// if screen size width is less than 1024px
$(".sharecontent").css('display', 'block'); // here you can also use show();
}
});
I also tried replacing the screen.width with window.width but still no success :(
我也尝试用 window.width 替换 screen.width 但仍然没有成功:(
回答by Eric
Use media queries. Your CSS code would be:
使用媒体查询。您的 CSS 代码将是：
@media screen and (max-width: 1024px) {
.yourClass {
display: none !important;
}
}
回答by jmespinosa
I have the almost the same situation as yours; that if the screen width is less than the my specified width it should hide the div. This is the jquery code I used that worked for me.
我和你的情况几乎一样；如果屏幕宽度小于我指定的宽度，它应该隐藏 div。这是我使用的对我有用的 jquery 代码。
$(window).resize(function() {
if ($(this).width() < 1024) {
$('.divIWantedToHide').hide();
} else {
$('.divIWantedToHide').show();
}
});
回答by peterthegreat
The problem with your code seems to be the elseif-statement which should be else if(Notice the space).
您的代码的问题似乎是 elseif 语句应该是else if（注意空格）。
I rewrote and simplyfied the code to this:
我将代码重写并简化为：
$(document).ready(function () {
if (screen.width < 1024) {
$(".yourClass").hide();
}
else {
$(".yourClass").show();
}
});
回答by Orbling
Is your logic not round the wrong way in that example, you have it hiding when the screen is bigger than 1024. Reverse the cases, make the nonein to a blockand vice versa.
在该示例中，您的逻辑是否不是错误的方式，当屏幕大于 1024 时，您将其隐藏。颠倒情况，将输入none变为 a block，反之亦然。
回答by Dally S
The problem I was having is my css media queries and my IF statement in Jquery clashing. They were both set to 700px but one would think it's hit 700px before the other.
我遇到的问题是我的 css 媒体查询和我在 Jquery 冲突中的 IF 语句。它们都设置为 700 像素，但有人会认为它比另一个先达到 700 像素。
To get around this I created a empty Div right at the top of my HTML(outside my main container)
为了解决这个问题，我在 HTML 的顶部（在我的主容器之外）创建了一个空的 Div
<div id="max-width"></div>
In css I set this div to display none
在 css 中，我将此 div 设置为不显示
#max-width {
display: none;
}
In my JS created a function
在我的 JS 中创建了一个函数
var hasSwitched = function () {
var maxWidth = parseInt($('#max-width').css('max-width'), 10);
return !isNaN(maxWidth);
};
So in my IF statement instead of saying if (hasSwitched<700) perform the following code, I did the following
所以在我的 IF 语句中，而不是说 if (hasSwitched<700) 执行以下代码，我做了以下
if (!hasSwitched()) { Your code
}
else{ your code
}
By doing this CSS tells Jquery when it's hit 700px. So css and jquery are both synchronized... rather than having a couple of pixels difference. Do give this a try peeps it shall definitely not disappoint.
通过这样做，CSS 会在达到 700px 时告诉 Jquery。所以 css 和 jquery 都是同步的......而不是有几个像素差异。一定要试一试，它绝对不会让人失望。
To get this same logic working for IE8 I used the Respond.js plugin(which also definitely works) It lets you use media queries for IE8. Only thing that wasn't supported was the viewport width and viewport height... hence my reason to try get my css and JS working together. Hope this helps you guys
为了让同样的逻辑在 IE8 上工作，我使用了 Respond.js 插件（它也绝对有效）它允许您使用 IE8 的媒体查询。唯一不支持的是视口宽度和视口高度……因此我有理由尝试让我的 css 和 JS 一起工作。希望这对你们有帮助
