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

Answer 2

如果我记得正确地toggle将display属性设置none为元素的style属性。如果您想强制按钮以“桌面”方向显示，那么您需要!important在桌面断点中包含一个声明。

或者，您可以收听onorientationchanged并切换到该站点的桌面版本（取消切换/激活需要激活的所有内容）。

Answer 3

为什么不避免切换，这样媒体查询就没有问题了。

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