0

我在我的网站上遇到了一个小障碍。在移动版本（<480px）中，我有一个用于评论的切换按钮。>480px 版本，按钮隐藏，我想一直显示评论。这是一种响应式设计，因此在调整大小时它是相同的页面。我怎样才能做到这一点？

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

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

.mobile-hide只是display: none;。当我将内容切换为显示然后隐藏并将浏览器大小调整为 >480px 时，内容仍然隐藏。我尝试设置.mobile-hide { display: block; }>480px 样式表，但它不起作用。

4

1 回答 1

1

您是否考虑过在 CSS 中使用媒体查询来实现这一点？听起来您不需要为此使用JS，但我有点不清楚。例如：

#comment-button {display:block;}

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

要监听浏览器宽度，您可以设置一个刻度事件（使用 setInterval 每 x 秒发生一次）或使用 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;}
于 2012-09-12T00:04:12.087 回答