Question

我正在制作一个完整的自适应网站，而且我遇到了一件事 - 也许你可以帮助我。

基本结构：

<div id="content">
<div id="content_left"></div><!--end content_left-->

<div id="content_right">
<div class="profile_box"></div><!--end profile_box-->
</div><!--end content_right-->

</div><!--end content-->

我试图做这些事情：

（当我将网站缩小到600px或更低时）
- 克隆整个#content_right
- 将.profile_box从#content_right移动到#content_left
- 分离整个#content_right
（当我将网站扩展到600或更多时）
- 将#content_right添加到#content
- 将.profile_box移回原位（#content_right）
$（窗口）.resize（函数（）{ if（$（＆＃39; body＆＃39;）。width（）＆lt; 600）{ var cr_clone = $（＆＃39; #content_right＆＃39;）。clone（true）; $（＆＃34; #content_right .profile_box＆＃34;）。detach（）。prependTo（＆＃39; #content_left＆＃39;） $（＆＃34;＃content_right＆＃34）分离（）; } 其他{ cr_clone.appendTo（＆＃39;＃含量＆＃39）; } }）;

它以一种方式工作 - 当我缩小网站时，.profile_box被移动到＃content_left，整个#content_right被分离 - 所以它工作得很好，但是......

另一方面，存在问题。当我萎缩＆＃34;网站，并希望拉伸到600或更多#content_right没有显示（网站刷新后它显示，但我想显示它没有刷新）。

它可以在移动设备上运行，因此，当用户旋转手机时，我想工作＆＃34;飞行＆＃34;取决于屏幕宽度。

任何帮助将不胜感激 - 谢谢。

我不想隐藏或显示它，因为它仍在加载数据，即使它已被隐藏。

Answer 1

你的cr_clone在else语句中不存在：

var cr_clone = $('#content_right').clone(true);
if($('body').width() < 600) {
            $("#content_right .profile_box").detach().prependTo('#content_left')
    $("#content_right").detach();
}
else{
    cr_clone.appendTo('#content');
}

更新

你需要两个if语句。只有当部分不存在时才需要添加该部分：

var cr_clone = $('#content_right').clone(true);
if($('body').width() < 600) {
    if ($("#content_left #content_right").length == 0){
        $("#content_right .profile_box").detach().prependTo('#content_left');
        $("#content_right").detach();
    }

}
else{
    if ($("#content_left #content_right").length > 0) {
        cr_clone.appendTo('#content'); 
        $("#content_left profile_box").detach().prependTo('#content_right'); 
    }

}

jQuery上调整大小，克隆div，分离并再次追加

1 个答案: