8

私は要素で使用.toggle()していbuttonます:

$("header button").click(function(event){
    $(".site-nav-wrapper").toggle();
    event.preventDefault();
});

これはうまくいきます。問題は、buttonが に切り替えられたdisplay:none後、デバイスの向きを変更して、デスクトップ メディア クエリをトリガーする場合です。デスクトップ メディア クエリを再度強制するという事実にもdisplay:block;かかわらbuttonずdisplay:none、

(サス):

.site-nav-wrapper{

            //Mobile First
            display:none;

            @include breakpoint($breakpoint-lg) {
                display:block;
            }
}

toggle()関数が保存しているものをリセットする方法はありますか?

4

3 に答える 3

8

toggleスタイルシートで行っていることをオーバーライドするインライン スタイリングを使用します。

目的の結果を得るには、特別なhiddenクラスを使用して要素を非表示にし、toggleClass代わりに使用する必要があります。

サス:

.site-nav-wrapper.hidden {

    display: none;

    @include breakpoint($breakpoint-lg) {
        display: block;
    }
}

JS:

$("header button").click(function(event){
    $(".site-nav-wrapper").toggleClass('hidden');
    event.preventDefault();
});
于 2012-08-21T02:58:17.840 に答える
1

私が覚えていれば、要素の属性にプロパティを正しくtoggle設定します。ボタンを強制的に「デスクトップ」方向に表示する場合は、デスクトップ ブレークポイントに宣言を含める必要があります。displaynonestyle!important

または、サイトのデスクトップ バージョンをリッスンしonorientationchangedて切り替えることもできます (アクティブ化する必要があるすべてのトグルを解除/アクティブ化します)。

于 2012-08-21T03:00:36.040 に答える
0

メディアクエリに問題がないように、トグルを避けてみませんか。

$("header button").click(function(event){
    $(".site-nav-wrapper:visible").hide();
    $(".site-nav-wrapper:hidden").show();
    event.preventDefault();
});
于 2012-08-21T02:58:44.063 に答える