Question

在我的模板上，我有一个右侧边栏容器，当在响应式（移动）视图中需要移动到页面顶部时。因为这个容器在DOM中较低，所以它显示在我的所有内容之下。我写了这个脚本来移动它，问题是当你在窗口大小之间切换时，它不会向后移动。（对我来说，一个用户永远不会看到的烦人的bug）

可以在http://sandbox.dev.activemls.com/agent/

找到行为的实例

这是我的代码：

var moveSidebar = function() {
    var windowsize = $(window).width(),
        isDesktop = windowsize > 765;
    if(!isDesktop) {
        $('#sidebar-3').insertAfter($('#sidebar-1'));
    }
    else if (isDesktop) {
        $('#sidebar-3').insertAfter($('#moveSidebar'));
    }    
}
$(document).ready(moveSidebar);
$(window).on("resize.showContent", moveSidebar);
moveSidebar();

然后html看起来像这样：

<div id="sidebar-1">
     <!--sidebar content-->
</div>
<div id="sidebar-2">
     <!--sidebar content-->
</div>
<div id="moveSiderbar">
     <div id="sidebar-3" class="well well-small">
          <!--sidebar content-->
     </div>
</div>

Answer 1

你有不同的ID：

<div id="moveSiderbar">

$('#sidebar-3').insertAfter($('#moveSidebar'));

更改其中一个并且可以正常工作

Answer 2

将id从'moveSiderbar'更改为'moveSidebar'或反过来。

jquery .insertAfter - 能够移动元素，但不能移动它

2 个答案: