在響應式設計中用CSS覆蓋JQuery函數

Question

我在我的網站遇到了一個小障礙。在移動版本（< 480px）中，我有一個用於評論的切換按鈕。 > 480像素版本，該按鈕是隱藏的，我想始終顯示評論。這是一個響應式設計，因此它在調整大小時是相同的頁面。我怎樣才能做到這一點？

$(document).ready(function(){ 
    $('#comments-container').addClass('mobile-hide'); 

    $('#show-comments').click(function() 
    { 
     $('#comments-container').filter(':not(:animated)').slideToggle(); 
    }); 
}); 

.mobile-hide只是display: none;。當我切換顯示內容然後隱藏並將瀏覽器大小調整爲大於480像素時，內容將保持隱藏狀態。我試着爲> 480px的樣式表設置.mobile-hide { display: block; }，但它不起作用。

Answer 1

你有沒有考慮過在CSS中使用媒體查詢來達到這個目的？這聽起來像你不需要使用JS，但我有點不清楚。例如：

#comment-button {display:block;} 

@media only screen and (max-device-width: 480px) { 
    #comment-button {display:none;} 
} 

要監聽瀏覽器的寬度，你可以設置一個記號事件（每x秒發生在使用setInterval），或使用resize事件：

$(window).on('resize', function(ev) { 
    if($(window).width() > 480) 
     $('html').removeClass('mobile-device').addClass('desktop-device'); 
    else 
     $('html').removeClass('desktop-device').addClass('mobile-device'); 
}); 

html.mobile-device .toggle-button {display:none;}