jQuery.thoggle(）和媒体查询

jQuery .toggle() and Media Queries

本文关键字：媒体 查询 thoggle jQuery      更新时间：2023-09-26

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

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

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

（Sass）：

.site-nav-wrapper{
            //Mobile First
            display:none;
            @include breakpoint($breakpoint-lg) {
                display:block;
            }
}

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

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

如果我没记错的话，toggle会在元素的style属性上将display属性设置为none。如果要强制按钮以"桌面"方向显示，则需要在桌面断点中包含!important声明。

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

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

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