在响应式设计中用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;}