jQuery 调整大小、克隆 div、分离并再次附加

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-->

我正在尝试做这些事情：

• （当我将网站缩小到 600 像素或更少时）
  • 克隆整个#content_right
  • 将 .profile_box 从 #content_right 移动到 #content_left
  • 分离整个#content_right

• （当我将站点扩展到 600 或更多时）

  • 将#content_right 附加到#content
  • 将 .profile_box 移回原处 (#content_right)

  $(window).resize(function(){ if($('body').width()

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

另一方面，有一个问题。当我在“缩小”网站并想要拉伸到 600 或更多时，#content_right 没有显示（在网站刷新后它会显示，但我想在不刷新的情况下显示它）。

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

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

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

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'); 
    }

}