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屏幕隱藏/顯示

回答

相關問題