Question

我想隐藏一个div，屏幕尺寸大于700px，仅在屏幕尺寸小于700像素时显示;

以下是我尝试使用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'); 
    }
});

它没有用 - 我做错了什么？

Answer 1

在这里使用javscript / JQuery没有任何意义，如果您想要尝试使用CSS媒体查询，例如

＆＃13;

.mobile-section {
  display: none;
  background-color: orange;
}

@media screen and (max-width: 700px) {
  .mobile-section {
    display: block;
  }
}

＆＃13;

<div class="mobile-section">
  hello mobile section
</div>

＆＃13;

Check out this fildde and resize the viewable area

Answer 2

server.exitaftertest=true是由width()支持的功能，提供例如jQuery属性。 width或document个元素。在您的情况下，它指的是window。

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

解释jQuery的.width（）和screen.width之间的区别是好的 - document是一个本机DOM属性，它返回整个宽度屏幕，例如如果您的显示器分辨率为1920x1200，screen.width将返回screen.width。

Answer 3

使用媒体查询，无需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

Answer 4

试试这个，

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

希望这有帮助。

带隐藏/显示的jquery屏幕

4 个答案: