响应jquery

需要一些帮助和建议。 长话短说，我有一个三栏网站

<div id="left-col">Some content</div>
<div id="mid-col">Some content</div>
<div id="right-col">Some content</div>

一些内容
一些内容
一些内容

当浏览器窗口低于1000px时，我会执行以下操作

$(window).on('resize', function () {

if ($(window).width() < 1000) {         
    $("#right-col").appendTo('#left-col');
    $("#mid-col").css("max-width","785px");
}
});

$（窗口）.on（'resize'，函数（）{
如果（$（窗口）.width（）<1000）{
$（“#右列”）。追加到（“#左列”）；
$（“#中柱”）.css（“最大宽度”，“785px”）；
}
});

现在使用appendTo并不是最好的解决方案，因为它需要整个html并将其放在div中。我最初的想法是将html移动到右列，然后将其附加到左列的末尾

不管怎样。。。 当浏览器大于1000px时，我如何使它从左栏恢复到原来的位置

---

这是其中的一部分

你能不能再把它加回去

$(document).ready(function() {
    $(window).on('resize', function () {
        if ($(window).width() < 500) {      
            $("#right-col").appendTo('#left-col');
        }else{
            $("#right-col").appendTo($('#left-col').parent());
        }
    });
});

$（文档）.ready（函数（）{
$（窗口）.on（'resize'，函数（）{
如果（$（窗口）.width（）<500）{
$（“#右列”）。追加到（“#左列”）；
}否则{
$（“#右列”）.appendTo（$（“#左列”）.parent（）；
}
});
});

---

嗯，我试过了，但不是你那样做的。你能给我解释一下（$（“#left col'）.parent（））背后的逻辑吗？因为两个冒号最初是同级冒号，当你在另一个冒号中追加一个冒号时，你可以通过将其追加到父冒号等方式取回冒号。这取决于HTML的结构，但同样的原则也适用。jQuery有太多的DOM遍历方法，你总是可以再次找到原始的父对象。我刚刚测试过这个，它“有效”，但它会导致一个奇怪的CSS问题。因为jquery在调整窗口大小时会做出多次反应，所以右列get中的内容向下移动的高度与中列占据的高度相同。您的代码只在else下工作，如果>500或即使我使用else if，也无法工作。有什么想法吗？我真的不确定问题是什么，因为它的工作原理就像你在Chrome中为我设计的小提琴一样，只是当窗口大小增加时它会恢复？是的，小提琴的基本版本工作得很理想。在追加之前，我会尝试找出它为什么会向下推。非常感谢你的帮助！！！！！