jQuery .toggle（）和媒體查詢

Question

我在button元素上使用.toggle() ：

$("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()函數存儲的內容？

Answer 1

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();
});

Answer 2

如果我沒記錯， toggle在元素的style屬性上將display屬性設置為none 。 如果要強制按鈕以“桌面”方向顯示，則需要在桌面斷點中包含!important聲明。

或者，您可以監聽onorientationchanged並切換到站點的桌面版本（取消切換/激活需要激活的所有內容）。

Answer 3

為什么不避免切換，所以媒體查​​詢沒有問題。

$("header button").click(function(event){
    $(".site-nav-wrapper:visible").hide();
    $(".site-nav-wrapper:hidden").show();
    event.preventDefault();
});