jquery - jQuery .hide() 不会被媒体查询撤销

Question

所以，我有一个在宽显示器上是 2up 的布局，然后是使用媒体查询在较小显示器上的列表视图。除了我在宽屏设置上还有 jQuery .show()/.hide()ing 元素之外，一切都运行良好。这也很好用，但是当我调整窗口大小时：jQuery 当前拥有的任何 .hide()d 都不会显示，尽管我的媒体查询定义了 display: block; 对于那些尺寸的元素。

有问题的站点位于此处，源代码在 GitHub 上。

我做错了什么，我该如何解决？

Answer 1

首先，jQuery 会替换您更改的元素的样式，因此无论您使用之前的 CSS 是什么：

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

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

1）创建一个隐藏类，这样你就可以为这个类创建一个媒体查询，所以当窗口> 1000px时它会有display:none；但如果它有 1000< 它可以有 display:block; 使用：

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

而不是隐藏（）。

2) 使用绑定到窗口的jQuery http://api.jquery.com/resize/的resize() 事件，这样你可以这样做：

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

我希望这就是你要找的。