在响应式设计中使用 CSS 覆盖 JQuery 函数

Question

我在我的网站上遇到了一个小障碍。在移动版本（480px 版本，按钮隐藏，我想一直显示 cmets。它是一种响应式设计，因此在调整大小时它是相同的页面。我该怎么做？

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

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

.mobile-hide 就是 display: none;。当我将内容切换为显示然后隐藏并将浏览器大小调整为 >480px 时，内容仍然隐藏。我尝试为 >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;}
}

要监听浏览器宽度，您可以设置一个刻度事件（使用 setInterval 每 x 秒发生一次）或使用调整大小事件：

$(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;}