jQuery .hide() 不会被媒体查询撤消

Question

因此，我在宽显示器上有一个 2up 的布局，然后使用媒体查询在较小的显示器上有一个 ListView 。一切都工作得很好，除了我在宽屏设置上还有 jQuery .show()/.hide()ing 元素。 这也很好用，但是当我调整窗口大小时:jQuery当前拥有的任何 .hide()d 都不会显示，尽管我的媒体查询定义了 display: block;对于那些具有该尺寸的元素。

相关网站位于here ，来源为 on GitHub .

我做错了什么以及如何解决这个问题？

Answer 1

首先jQuery会替换你改变的元素的样式，所以不管你之前的CSS是什么:

$("#myelement").hide();

它将强制更改 CSS 显示属性，这里有 2 个选项。

1) 创建一个隐藏类，这样您就可以为该类创建一个媒体查询，因此当窗口 > 1000px 时，它将显示:none;但如果它有 1000< 它可以有 display:block;使用:

$("#myElement").addClass("hidden");

而不是 hide()。

2) 玩转 jQuery 的 resize() 事件 http://api.jquery.com/resize/绑定(bind)到窗口，这样你就可以这样做:

$(window).resize(function(){
    if($(window).width()> 1000){
        //Hide or show, or do some pirate stuff
    }else{
        //More pirate stuff
    }
});

我希望这就是您正在寻找的内容。