Question

基本上，我希望当屏幕大小高于某个阈值时页面上的元素移动到另一个元素，但是如果它低于该阈值，则将其保留或放回原点。

到目前为止，我只能将它添加到前面，但如果它低于它，则不能重置元素。

$(window).resize(function() {

if ($(window).width() < 782){
    $("#cat_con").prependTo("#meta");
}

else {  }

});

 $(window).trigger('resize');

Answer 1

如果你提供一个jsfiddle或其他什么会好得多。改善您的#cat_con所在的HTML。但是你仍然可以使用一个父div将它包裹起来并将#cat_con追加到你的其他块中。{/ p>

假设HTML

<div id="wrapper">
<div id="cat_con">Your content</div>
</div>

现在在你的js中做这样的事情

if ($(window).width() < 782){
    $("#cat_con").prependTo("#meta");
}

    else { 
     $("#cat_con").appendTo("#wrapper");

 }

    });

更新：我更新了它运作的jsfiddle

http://jsfiddle.net/n4qDv/1/

$(window).resize(function() {
console.log($(window).width());
if ($(window).width() < 782){
    $("#cat-con").prependTo("#meta");
}

else { 

$("#cat-con").prependTo("#cat-wrapper");
}

});

HTML

<header id="header">
    <h1>Title</h1>
    <div id="cat-wrapper"><div id="cat-con">Categories</div></div>
</header>

<div id="meta">

      <h1>Sibear Content</h1>

</div>

Answer 2

试试这个：

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

if ($(window).width() < 782){
    $("#cat_con").prependTo("#meta");
}

else {  }

});

根据窗口大小预先添加

2 个答案: