javascript - jQuery .toggle() 和媒体查询

Question

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

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

这很好用。问题是如果 button 切换到 display:none 然后我改变设备方向，触发我的桌面媒体查询，尽管我重新强制 display:block; 在桌面媒体查询上，按钮 保持切换到 display:none:

(萨斯):

.site-nav-wrapper{

            //Mobile First
            display:none;

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

有没有办法重置 toggle() 函数正在存储的内容？

Answer 1

toggle 使用内联样式，它会覆盖您在样式表中所做的任何事情。

要获得所需的结果，您应该使用特殊的hidden 类来隐藏元素，并使用toggleClass。相反。

SASS:

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