0

ウィンドウ幅に応じてセクションを表示/非表示にしたい。私は試した：

$(function(){
    "use strict";

    if($(window).width() > 600) {
        $("section").hide();
    }
    else {
        $("section").show();
    }
});

HTML:

<section>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</section>

しかし、セクションが非表示になっているのを見ていません。私は何を間違っていますか？

デモ: http://jsfiddle.net/jLx5V/

4

4 に答える 4

1

if発言自体はどうでもいい。私の推測では、最初にページに移動したときのウィンドウの幅は 600px を超えています。イベントをフックしていないresizeため、ウィンドウ サイズが変更されたときにそのコードを再実行していません。

更新されたフィドル

$(function(){
    "use strict";

    resize();
    $(window).resize(resize);

    function resize() {
        $("section").toggle($(window).width() <= 600);
    }
});

それはこれを行います：

  1. resizeウィンドウの幅に基づいてすべての要素を表示または非表示にする関数を定義しsectionます (幅が 600px 以下の場合は表示し、それ以上の場合は非表示にします)。

  2. resizeDOM Ready の呼び出し(これは、最初に呼び出していたときです)。

  3. resizeのイベントにフックしてwindow、ユーザーがウィンドウのサイズを変更した場合に再度呼び出されるようにします。

  4. toggle(flag)「フラグが true の場合は表示、それ以外の場合は非表示」の省略形である を使用します。

于 2013-11-08T16:53:04.773 に答える
0

Jsfiddle は結果を iframe にロードします。

この場合$(window).width()、表示される実際のウィンドウではなく、iframe のサイズを取得します。

于 2013-11-08T16:54:00.140 に答える
0

JavaScriptベースの回答を補完するために、この特定の動作はメディアクエリで簡単に実装できることを指摘したいと思います:

@media (max-width: 600px) {
    section {
        display: none;
    }
}

例: http://jsfiddle.net/jLx5V/10/ (出力ペインのサイズを変更してみてください)

于 2013-11-08T17:27:50.073 に答える
0

おそらく、DOMロード時だけでなく、ウィンドウのサイズ変更にバインドする必要があります...

$(function () {
  "use strict";
  $(window).resize(function (event) {
    if ($(window).width() >= 600) {
        $("section").hide();
    } else {
        $("section").show();
    }
  });
});

http://jsfiddle.net/Mutmatt/jLx5V/5/

于 2013-11-08T16:55:06.017 に答える