切换 class 与 jQuery 和 CSS 冲突

Question

我有一个 class，我们称它为 "responsive-table,"，我有一个媒体查询，当您的分辨率达到某个阈值时，它会删除可见性：

.responsive-table { display: block; }

@media screen and (max-width: 600px) {
  .responsive-table { display: none; }
}

在小于 600 像素的屏幕上，有一个按钮可以切换此 table 的可见性，该按钮具有点击操作：

$(".responsive-table").toggle();

然而，一旦执行此操作，假设您打开 table，然后关闭，当 window 扩展到比 600px 更高分辨率时，.responsive-table 似乎忽略了 display: block 的媒体查询；它应该在超出 600 像素视口阈值的地方变得可见。

Answer 1

这样用怎么样？

.responsive-table { display: none; }

@media screen and (min-width: 600px) {/*notice: min-width is used*/
  .responsive-table { display: block !important; }
}

更新：

如果您不想使用 !important，那么您可以像这样使用 jQuery（使用您的 css 代码）：

if($(window).width()<600){
   //use your code inside this
   $(".responsive-table").toggle();
}

Answer 2

用 javascript 做这个 $(window).resize(function() { if ($(".theTable").width() > 600) { $(".theTable").show(); $(".theToggleButton").hide(); } else { $(".theTable").hide(); $(".theToggleButton").show(); $(".theToggleButton").click(function(){ $(".theTable").toggle(); }); } });

切换 class 与 jQuery 和 CSS 冲突

Toggle class with jQuery and CSS clashing

jquery

css

media-queries

toggle