jquery .insertAfter - 能夠移動元素，但不能移回

在我的模板上，我有一個右側邊欄容器，當在響應（移動）視圖中需要移動到頁面頂部時。由於這個容器在DOM中較低，所以它顯示在我的所有內容之下。我寫了這個腳本來移動它，問題是當你在窗口大小之間切換時，它不會回退。（有點很惱人的錯誤對我來說，用戶再也看不到）jquery .insertAfter - 能夠移動元素，但不能移回

行爲的活生生的例子可以在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>

來源

2013-07-26 Binkley

你有不同的ID：

<div id="moveSiderbar"> 

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

更改其中之一，它的工作原理

來源

2013-07-26 14:18:31 Raidri

是的，我知道我有不同的id。原因是，當窗口大小降到765px以下時，我需要ID順序爲sidebar-1，sidebar-3，sidebar-2。在默認狀態下，sidebar-3需要位於moveSidebar容器內。 – Binkley

問題是你沒有'moveSidebar'容器，你有一個'moveSiderbar'容器。爲了將它返回到默認的開始狀態，使用'appendTo'而不是'insertAfter' http://jsfiddle.net/3Zvya/ –

@Binkley：但是對於'insertAfter'方法，你需要給出一個現有元素的id （'moveSidebar' <->'moveSiderbar'） – Raidri

變化從「moveSiderbar」到「moveSidebar」或周圍的其他方式的ID。

來源

2013-07-26 14:23:27

jquery .insertAfter - 能夠移動元素，但不能移回

回答

相關問題