切换 class 与 jQuery 和 CSS 冲突
Toggle class with jQuery and CSS clashing
我有一个 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 像素视口阈值的地方变得可见。
这样用怎么样?
.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();
}
用 javascript 做这个
$(window).resize(function() {
if ($(".theTable").width() > 600) {
$(".theTable").show();
$(".theToggleButton").hide();
} else {
$(".theTable").hide();
$(".theToggleButton").show();
$(".theToggleButton").click(function(){
$(".theTable").toggle();
});
}
});
我有一个 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 像素视口阈值的地方变得可见。
这样用怎么样?
.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();
}
用 javascript 做这个
$(window).resize(function() {
if ($(".theTable").width() > 600) {
$(".theTable").show();
$(".theToggleButton").hide();
} else {
$(".theTable").hide();
$(".theToggleButton").show();
$(".theToggleButton").click(function(){
$(".theTable").toggle();
});
}
});