jQuery .toggle()和媒体查询

Question

我正在使用.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()函数存储的任何内容？

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