jquery屏幕隐藏/显示
我想隐藏一个div它的屏幕尺寸大于700px,并只显示屏幕尺寸小于700像素;jquery屏幕隐藏/显示
这里是我试图与使用jQuery 3
jQuery(document).ready(function() {
if ((screen.width>701)) {
$(".mobile-section").css('display', 'none'); $(".yourClass").hide();
}elseif ((screen.width<=699)) {
$(".mobile-section").css('display', 'block');
}
});
它不工作来实现的代码---我在做什么错?
是没有意义的真正使用javscript/JQuery的这里,如果这是你想要使用CSS媒体查询尝试像
.mobile-section {
display: none;
background-color: orange;
}
@media screen and (max-width: 700px) {
.mobile-section {
display: block;
}
}
<div class="mobile-section">
hello mobile section
</div>
谢谢....这解决了我的问题..我不得不补充!显示器的重要性---工程很漂亮。 –
@TheNagaTanker如果你必须添加'!important'意味着元素具有内联样式(可以添加js),所以'!important'确实覆盖了内联样式。如果确实没有其他解决方案,请仅使用它。无论哪种方式,对于你的问题和给定的任务,没有必要使用JavaScript。如果解决了,请不要忘记接受正确的答案。 – caramba
width()
是由jQuery
支持的功能,提供了例如width
的性质。 document
或window
元素。在你的情况下,它指的是document
。
jQuery的.WIDTH()和screen.width之间的差异的解释将是很好 - screen.width
是天然DOM属性,并将其返回的宽度整个屏幕,例如如果您拥有1920x1200分辨率的显示器,screen.width
将返回1920
。
$(document).ready(function() {
if (($(this).width() > 701)) {
$(".mobile-section").css('display', 'none');
$(".yourClass").hide();
}
else {
$(".mobile-section").css('display', 'block');
}
});
解释jQuery的'.width()'和'screen.width'之间的区别很好 – developius
@developius我已经添加了一个解释。 –
使用媒体查询,无需JavaScript。
@media only screen and (min-width: 700px) {
#hideMe{
display:none;
}
}
<div id="hideMe">This should only be displayed on smaller than 700px screens</div>
你可以阅读有关媒体查询的位置:https://www.w3schools.com/css/css_rwd_mediaqueries.asp
试试这个,
// Returns width of browser viewport
$(window).width();
// Returns width of HTML document
$(document).width();
$(document).ready(function() {
if ($(window).width() > 701) {
$(".mobile-section").css('display', 'none');
} else if ($(window).width() <= 700) {
$(".mobile-section").css('display', 'block');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width : 100px; height:100px;border:solid 1px red;" class="mobile-section">
</div>
希望这会有所帮助。
使用CSS媒体查询 – David