Question

我是jQuery和css的新手，我正在设计一个主要用于自学目的的小型网站。

布局相当基本，一个主列和一个列。但对于较小的显示器或平板电脑，我想利用@media屏幕查询来分离侧列并将其堆叠在主列下。而且，到目前为止一切顺利，它都有效。

然后，我在侧栏添加了一些小部件，主要是iframe元素 - 没有麻烦。

那是我遇到奇怪的事情的时候。为了保持侧栏的高度可管理，我决定让一个小部件显示2个div（每个嵌入一个iframe），或者当该列很窄时按下按钮。但当它堆叠在主体下方时，它会变得更宽，我想并排显示两个iframe，并隐藏选择按钮。

奇怪的是，它似乎工作，直到你使用按钮切换iframe之间的可见性。如果在几个开关之后调整窗口大小，则窗口小部件不会再显示div并排显示，因为它应该按照css方向显示。重新加载CSS没有帮助。我试图理解它，就像jQuery为取代@media屏幕指令的元素创建了另一个上下文。

对我所做错的任何暗示都会非常感激。

干杯，

曼努埃尔

您可以在此处观看该网站：example site

相关（当然是有缺陷的）jQuery代码：

$(document).ready(function() {
$('button', '#sindex').button();
$('button', '#curmet').button();

$("#curmet").bind('click', function(){
$("#sindex").show();
$("#curmet").hide();
$('.stockexindex').css('display', 'none');
$('.stockexcurmet').css('display', 'inline-block');
});

$("#sindex").bind('click', function(){
$("#sindex").hide();
$("#curmet").show();
$('.stockexcurmet').css('display', 'none');
$('.stockexindex').css('display', 'inline-block');
});

});

Answer 1

通过使用jQuery的.css()，您可以覆盖样式表，因为内联样式是为此而设计的。相反，添加一些做同样事情的CSS类名声明，然后使用jQuery添加/删除元素的类名。这样你仍然在@media域中。

在jQuery操作之后@media屏幕查询似乎变得不确定？

1 个答案: