0

私はこの問題を解決しようとして、オンライン全体を見てきました。デスクトップ Web サイトをモバイル向けにレスポンシブにする過程にあり、ナビゲーション メニューで問題が発生しました。モバイル版に設定してdisplay:noneいますが、画像かテキストのどちらかをクリックすると見られるようにしたいです。UL私が他の場所で見つけた解決策はすべて、要素と要素のみを持つ div メニューでのみ機能しLIました。私はH2各「セクション」などにタグを持っています。ボタンをクリックDIVするだけで、HTMLコードなどをいじることなく、モバイルクエリだけで全体が表示されます.

近いと思われるこのjqueryコードを見つけましたが、デスクトップのnav divを隠しているようです。display:noneCSSを介してメディアクエリに設定されたものだけで動作する必要があります。

$("#preview").toggle(function() {
    $("#navi").hide();
}, function() {
    $("#navi").show();
});

});

「メニューはここをクリック」などのテキストをクリックするだけで呼び出されます...ボタンまたはリンクにすることもお勧めします。

4

1 に答える 1

1

$.toggleClass()を使用する代わりに試してください$.hide()。このようにして、メディア クエリ css はより詳細に制御できます。以下は700px未満の画面でのみdivを非表示にするボタンの例です。

JS:

$("#preview").toggleClass('hideInMobile');

CSS:

@media (max-width: 700px){
    .hideInMobile 
    {
        display:none
    }
}

デモ: http://jsfiddle.net/HZDCW/2/

それが役に立てば幸い。

于 2013-04-21T01:33:43.120 に答える