2

ナビゲーションを表示および非表示にするCSSおよびメディアクエリがいくつかあります。

したがって、デフォルトのナビゲーションは次のとおりです。

nav {
  display: inline;
}

次に、メディアクエリを使用して非表示にします。

@media only screen and (min-width: 480px) and (max-width: 767px) {
  nav {
    display: none;
  }
}

すべてが完全に機能します。次に、メディアクエリが有効なときにナビゲーションを表示および非表示にするために、JavaScriptをボタンに接続します。

ただし、ブラウザのサイズをフルスクリーンに戻すと、767pxを超えると、ナビゲーションが再表示されません。デスクトップユーザーにナビゲーションを表示するにはどうすればよいですか？

4

3 に答える 3

1

このようにjqueryサイズ変更ハンドラーをウィンドウにバインドします

$(window).resize(function(e){
    if($(window).width() > 767){
        $('nav').show()
    } else {
        $('nav').hide()
    }
})

オブジェクトのキャッシュで実行できる最適化はおそらくいくつかありますが、これにより、最初から始める必要があります。

于 2012-11-08T22:46:42.650 に答える
0 
@media all and (min-width: 768px) {
    nav
    {
        display: inline!important;
    }
}

Kai Qingの回答は、jQuery.toggleイベントが追加していたインラインCSSをオーバーライドする必要があることに気づきました。もちろん正しいメディアクエリ内です。

于 2012-11-08T22:44:56.403 に答える
-1

jsにnavにクラスを追加させ、！importantを使用してメディアクエリステートメントを上書きすることができます...

nav {
  display: inline;
}
.force_display{
    display:inline !important;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  nav {
    display: none;
  }
}

js関数にforce_displayクラスを追加するだけです（jqueryを使用していると仮定します）...

$('#button').on('click', function(){
    $('nav').toggleClass('force_display');
});
于 2012-11-08T22:25:18.927 に答える