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。

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

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

jQuery .toggle（）和媒体查询

3 个答案: