2

CSS メディア クエリを使用して、「デスクトップ」サイトからモバイル Web サイトを作成しようとしています。

プッシュダウンメニュー（モバイル）に変換できるシンプルなドロップダウンメニュー（デスクトップ）があります。css は、ブラウザの幅が 768px を超えるデスクトップ用にロードされ、モバイルのプッシュダウン メニューは 767px 未満の任意の場所にロードされます。

問題は、プッシュダウン メニューが正しく機能するために js ファイルが必要なことです。js ファイルは、メニューを含む div を強制的に非表示にします。したがって、ブラウザーの幅が 767px まではプッシュダウンが正常に機能し、768px ではデスクトップ ナビゲーションが表示されません。

私は JavaScript と Jquery を初めて使用しますが、最小限の知識を使用してこれを効果的に動作させようとしました。サイトはできるだけ最小限に抑える必要があるため、できるだけシンプルにする必要があります。

現時点で、これは私が適切に機能することに最も近いものです:

function hideDiv(){
    if ($(window).width() < 768) {

        $(".togglebox").hide();

    }else{

        $(".togglebox").show();

    }

}

//run on document load and on window resize
$(document).ready(function () {

    //on load
    hideDiv();

    //on resize
    $(window).resize(function(){
        hideDiv();
    });

});


$(document).ready(function(){

    $(".togglebox").hide();

    $("h1").click(function(){

    $(this).next(".togglebox").slideToggle("slow");
    return true;
    });
});

ノート：

プッシュダウン メニューを機能させるには、トグルボックス div を非表示にする必要がありますが、デスクトップ ナビゲーションを表示するには、同じ div を 768 ピクセル以上の幅で表示する必要があります。

上記のコードは正常に動作しますが、ページの URL を入力すると、ブラウザの幅を変更しようとするまでナビゲーションが表示されません。私は 2 つの (document).ready 関数を持っていることを認識しており、これが問題かもしれませんが、コードをいじってみましたが、うまくいきませんでした。私が見落としている簡単な解決策があるに違いありませんか？

プッシュダウン メニュー関数を最大 767 ピクセルの幅でのみ実行し、それ以上の幅でトグルボックスの div を表示するだけでよいと考えました。

4

2 に答える 2

3

メディア クエリを既に使用している場合は、要素を非表示にするために JavaScript ファイルを読み込む必要はありません。たとえば、.toggleBox幅が 767 ピクセル以下の任意のウィンドウで を非表示にできます。

@media screen and ( max-width: 767px ) {
  .toggleBox {
    display:none;
  }
}

メディア クエリが発明された目的を達成するために JavaScript でブラウザの幅をポーリングする理由はありません。

デモ: http://jsfiddle.net/HPsu8/show/

サポートの注意事項

以下のコメントで指摘されているように、Media Query は古いバージョンの Internet Explorer ではサポートされていません。古いバージョンの IE のサポートを維持しながらそれらを使用したい場合は、ポリフィルを検討してください。ここでいくつか見つけることができます: https://github.com/Modernizr...HTML5-Cross-Browser-Polyfills

于 2012-05-26T23:14:42.110 に答える
2

ページが最初に読み込まれたときにコードを非表示にしているため、ページが最初に読み込まれたときにコードが機能しません。ページが最初に読み込まれるときに常に非表示にする代わりに、既に持っている関数を呼び出すだけで、hideDiv()最初に表示するかどうかを決定します。コードを次のように変更します (.hide()行を削除し、1 つの呼び出しでhideDiv()自然な仕事を実行できるようにします)。

function hideDiv(){
    if ($(window).width() < 768) {
        $(".togglebox").hide();
    }else{
        $(".togglebox").show();
    }
}

//run on document load and on window resize
$(document).ready(function () {
    //on load
    hideDiv();

    //on resize
    $(window).resize(function(){
        hideDiv();
    });
});


$(document).ready(function(){
    $("h1").click(function(){
        $(this).next(".togglebox").slideToggle("slow");
        return true;
    });
});
于 2012-05-26T23:39:08.120 に答える