0

ブラウザーのサイズ変更で div (この場合は .show500、.hide500) を追加/削除する、私が書いた (JavaScript/jQuery はあまり得意ではありません) jQuery を少し使用しています。コードは次のとおりです。

//Completely add/remove divs completely from DOM on browser resize

        $(function(){

            $(window).resize(function(){

                var win = $(this); //this = window

                if (win.width() <= 500) { 

                    $('.show500').add();

                    $('.hide500').remove();

                } else if (win.width() > 500) { 

                    $('.hide500').add();

                    $('.show500').remove();

                }

            });

        });

したがって、ブラウザー ウィンドウが 500 以下の場合は、.show500 を DOM に追加し、.hide500 を DOM から削除します。

次に、ブラウザの幅が 500 より大きい場合は、DOM に .hide500 を追加し、DOM から .show500 を削除します。

ただし、このコードを使用すると、デフォルトで .hide500 div が表示され、ブラウザのサイズを縮小すると、.hide500 div が非表示になり、.show500 が表示されなくなります。次に、ブラウザを展開すると、両方の div が消えます。

コードの jsFiddle は次のとおりです: http://jsfiddle.net/XzrPR/

皆さんからのあらゆる助けに感謝します！

4

4 に答える 4

1

あなたelse ifは just に減らすことができます. andの代わりにelse使用するつもりだったと思います:.show().add().hide().remove()

if (win.width() <= 500) { 
    $('.show500').show();
    $('.hide500').hide();
} else {
    $('.hide500').show();
    $('.show500').hide();
}

ただし、メディアクエリを使用して純粋な CSSでこれを行うこともできます。

.show500 {
    display: none;
}
.hide500 {
    display: block;
}
@media all and (max-width: 500px) {
  .show500 {
     display: block;
  }
  .hide500 {
    display: none;
  }
}

http://css-tricks.com/css-media-queries/

于 2013-04-19T19:35:15.310 に答える
0

追加/削除ではなく、非表示/表示の非常に単純なメディア クエリの例:

@media (mix-width:501px) and (max-width:9999px) {
    .show500    { display:none; }
    .hide500    { display:block; }
} 

@media (max-width:500px){
    .show500    { display:block; }
    .hide500    { display:none; }
}
于 2013-04-19T19:35:59.673 に答える
0
  • 使いたく.show()ない.add()
  • 使いたいのに使いたく.hide()ない.remove()
于 2013-04-19T19:35:05.990 に答える
0

.remove()は DOM から要素を削除します。元に戻すことはできません

この方法を試してください

 if (win.width() <= 500) { 
    $('.show500').show();
    $('.hide500').hide();
 } else if (win.width() > 500) { 
    $('.hide500').show();
    $('.show500').hide();
 }

ワーキングフィドル

于 2013-04-19T19:38:21.863 に答える