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'); 
    } 
});

它不工作来实现的代码---我在做什么错？

来源

2017-03-16 The Naga Tanker

使用CSS媒体查询 – David

是没有意义的真正使用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>

Check out this fildde and resize the viewable area

来源

2017-03-16 11:07:27 caramba

谢谢....这解决了我的问题..我不得不补充！显示器的重要性---工程很漂亮。 –

@TheNagaTanker如果你必须添加'！important'意味着元素具有内联样式（可以添加js），所以'！important'确实覆盖了内联样式。如果确实没有其他解决方案，请仅使用它。无论哪种方式，对于你的问题和给定的任务，没有必要使用JavaScript。如果解决了，请不要忘记接受正确的答案。 – caramba

width()是由jQuery支持的功能，提供了例如width的性质。 document或window元素。在你的情况下，它指的是document。

http://api.jquery.com/width/

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'); 
 
    } 
 
});

来源

2017-03-16 11:04:11

解释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

来源

2017-03-16 11:07:59 Brad

试试这个，

// 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>

希望这会有所帮助。

来源

2017-03-16 11:09:54 rahulsm

jquery屏幕隐藏/显示

回答

相关问题