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

Question

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

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

然后，我在该侧栏中添加了一些小部件，主要是 iframe 元素 - 没问题。

就在那时，我遇到了一些奇怪的事情。为了使侧栏的高度易于管理，我决定让一个小部件显示 2 个 div(每个都嵌入一个 iframe)，当该栏很窄时，只需按一下按钮即可。但是当它堆叠在主框架下时，它变得更宽，我想并排显示两个 iframe，并隐藏选择按钮。

奇怪的是，它似乎一直有效，直到您使用按钮在 iframe 之间切换可见性。如果您在几次切换后调整窗口大小，该小部件将不再按照 css 方向并排显示 div。重新加载 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 域中。