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