0

問題のサイト：http：//www.mtthwbsh.com

このサイト用に折りたたみ可能なナビゲーションを作成していますが、折りたたんだ後、ウィンドウを拡大および縮小してウィンドウを再度拡大すると、ナビゲーションが消えることに気づきました。メディアクエリでブロックするように表示を変更しようとしましたが、jQueryがそれをオーバーライドしていると思います。これを引き起こしているものは何ですか？

また、クリックしたときに矢印を180度回転させたいのですが、これをどのようにターゲットにしますか？私のjQueryは次のとおりです。

/* toggle nav */
$("#menu-icon").on("click", function(){
$(".nav").slideToggle();
$(this).toggleClass("active");
});
4

2 に答える 2

0

$(".nav").slideToggle();状態でナビを離れているようdisplay:none;です。display:block;メディアクエリでを設定しようとしたときにを使用しました!importantか?

編集

570px 未満の画面サイズを切り替える必要がある場合は、570px を超えるサイズでは CSS で display:block; に設定されるようにする必要があります。

@media (min-width:571px) {
    .nav { display:block!important; }
}

これにより、表示プロパティが適切にオーバーライドされます。

于 2012-12-21T03:13:42.737 に答える
0

ではstyle.css、行番号。1015、使用されるメディアクエリmax-width:820px

@media (max-width: 820px)

これらの画像、Visible nav、Hidden nav を確認してください (css インスペクタを確認してください)

于 2012-12-21T04:37:26.867 に答える