jquery - 切换类与jQuery和CSS冲突

我有一个类，可以称之为“响应表”，其中有一个媒体查询，当您达到分辨率的某个阈值时，它会删除可见性：

.responsive-table { display: block; }

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

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

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

但是，一旦执行了此操作，并且可以说您打开或关闭该表，则当窗口扩展到比600px更高的分辨率时，.sensitive-table似乎会忽略display：block;的媒体查询。在超出此600px视口阈值的位置应该可以看到它。

最佳答案

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