[英]How to only use jquery .css() on a specific media query?
當用戶的瀏覽器寬度小於1160像素時,會設置媒體查詢以折疊我的網站的右側邊欄。 他們可以通過點擊一個小箭頭將其取回,然后它將與內容重疊(絕對定位)。
無論如何,我使用以下jQuery來實現這一目標:
$('.right_sidebar_preview').on('click', function() {
$('.right_sidebar_preview').css('display', 'none');
$('.right_sidebar').css('display', 'block');
});
$('.right_sidebar').on('click', function() {
$('.right_sidebar_preview').css('display', 'block');
$('.right_sidebar').css('display', 'none');
});
所以基本上當瀏覽器大於1160px並且邊欄可見時我已經隱藏了預覽,在我設置的媒體查詢中,當它低於1160px時,側邊欄變得不可見,並且“側邊欄預覽”顯示哪些用戶可以點擊使其變大。
CSS:
.right_sidebar {
width: 242px;
height: 100%;
background-color: #d8e1ef;
float: right;
position: relative;
}
.right_sidebar_preview {
display: none;
}
@media(max-width:1160px) {
.right_sidebar {
position: absolute;
right: 0;
display: none;
}
.right_sidebar_preview {
display: block;
background-color: #d8e1ef;
position: absolute;
right: 0;
width: 15px;
height: 100%;
}
}
我的問題是,當我使用上面的代碼時,假設我們處於不到1160px的媒體查詢中,我會打開側邊欄然后再次折疊它,當我伸出瀏覽器返回時,它也關閉了側欄上大於1160px的媒體查詢。
那么無論如何我可以使用.css()(或替代方法)來指向特定的媒體查詢?
不要操縱CSS display:
property。 相反,使用CSS類來控制側邊欄及其句柄的可見性。 這樣,您可以使用媒體查詢來控制元素是否顯示。
在下面的演示中,單擊“整頁”按鈕以查看其在屏幕上的工作方式> 1160px。
$(function() { $('.right_sidebar, .right_preview').on('click', function() { $('.right_sidebar, .right_preview').toggleClass('lt-1160-hide lt-1160-show'); }); });
.right_sidebar { width: 100px; height: 100px; background-color: papayawhip; float: left; display: block; } .right_preview { width: 20px; height: 100px; background-color: palegoldenrod; float: left; display: none; } @media(max-width: 1160px) { /* note: the following rules do not apply on larger screens */ .right_sidebar.lt-1160-show, .right_preview.lt-1160-show { display: block; } .right_sidebar.lt-1160-hide, .right_preview.lt-1160-hide { display: none; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="right_sidebar lt-1160-hide">Sidebar</div> <div class="right_preview lt-1160-show">›</div>
在最近的一個項目中,我不得不根據瀏覽器大小處理jQuery中的單個函數。 最初我要檢查設備寬度是否適用於移動設備(320px):
jQuery的
$(window).resize(function(){
if ($(window).width() <= 320) {
// your code here
}
});
要么
$(window).resize(function(){
if ($('header').width() == 320 ){
// your code here
}
});
像這樣的東西?
$(window).resize(function(){
if ($(window).width() <= 1160){
// lets party
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.