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以上に変更すると、コンテンツは非表示のままになります。> 480pxのスタイルシートに設定しようとしまし.mobile-hide { display: block; }たが、機能しません。

4

1 に答える 1

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;}
于 2012-09-12T00:04:12.087 に答える