一直在尝试让 $("#id1").add();
和 $("#id2").remove();
在里面工作以下函数取自 this邮政。我正在让 $("#id2").remove();
从控制台工作,我想让它们都在这个函数内部工作。
(function($) {
var $window = $(window),
function resize() {
if ($window.width() < 801) {
$("#id1").add();
$("#id2").remove();
}
else {
$("#id2").add();
$("#id1").remove();
}
}
$window
.resize(resize)
.trigger('resize');
})(jQuery);
或者,可以使用 .addClass/.removeClass 让它工作,但是它也必须以所有子类为目标..
最佳答案
媒体查询可用于切换元素的可见性:
CSS
/* show id1, hide id2, when screen resolution is 800px or less */
@media screen and (max-width: 800px) {
#id1 {
display:block; /*or inline, or whatever */
}
#id2 {
display:none;
}
}
/* show id2, hide id1, when screen resolution is greater than 800px */
@media screen and (min-width: 801px) {
#id1 {
display:none;
}
#id2 {
display:block; /*or inline, or whatever */
}
}
但是如果它们需要实际添加到 DOM 中或从 DOM 中删除,那么这个怎么样
(function($) {
var $id1=$('#id1');
var $id1Parent=$id1.parent();
var $id2==$('#id2');
var $id2Parent=$id2.parent();
var $window = $(window),
function resize() {
$('#id1,#id2').remove();
if ($window.width() < 801) {
$id1Parent.append($id1);
}
else {
$id2Parent.append($id2);
}
}
$window
.resize(resize)
.trigger('resize');
})(jQuery);
关于javascript - 根据屏幕宽度添加/删除 CSS id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27883026/