jQuery更改文檔流程

-1

我想根據屏幕寬度重新排列文檔流。在我的例子中，我試圖根據屏幕寬度前後移動兩個div。jQuery更改文檔流程

第一個是我想在屏幕寬度爲480px的文檔中向上移動到文檔div的後面，然後在屏幕寬度超過480px時移回其默認位置。這部分代碼工作正常。

雖然其他div，搜索框不是。在我的示例中，當屏幕寬度低於480像素時，我想從另一個名爲#headerRight的div元素移動表單元素，並將其移動到#footer元素內，但在#footer中預先存在的任何其他元素之前。

我這樣做是通過jQuery中的.prepend（）命令。然後當屏幕寬度超過480px。我想將它移回到#headerRight div中的原始位置。

因此，當寬度低於480時，表單元素的工作方式應該如此，它會在該div中的任何內容之前移動到#footer div中。但是，當我將屏幕寬度調整到480px以上時，它不會返回到#headerRight div中的原始位置。這是我的jsfiddle sample。

$(function() { 
    $(window).resize(ChangeDiv); 
    $(window).trigger("resize"); 
}); 

function ChangeDiv() { 
    var width = $(window).width(); 
    if (width <= 480) { 
     $("#menu").after($("#header")); 
     $("#headerRight form").prependTo($("#footer")); 
    } else { 
     $("#header").after($("#menu")); 
     $("#footer").prependTo($("headerRight form")); 
    } 
}

感謝 -Sohail

來源

2014-09-02 user2371684

看起來它的工作方式，你描述你已經發布的小提琴的方式。 – 2014-09-02 09:27:23

其實它沒有，因爲搜索框停留在頁腳時調整大於480px。當大於480px時，菜單會恢復到原始位置，但serachbox不會。 – user2371684 2014-09-02 10:19:09

你在'headerRight'之前缺少'#' ... – CBroe 2014-09-02 10:20:03

解決它:)這是我使用的代碼：

$(function() { 
    $(window).resize(ChangeDiv); 
    $(window).trigger("resize"); 
}); 

function ChangeDiv() { 
    var width = $(window).width(); 
    if (width <= 480) { 
     $("#menu").after($("#header")); 
     $("#headerRight form").prependTo($("#footer")); 
    } else { 
     $("#header").after($("#menu")); 
     $("#footer form").appendTo($("#headerRight")); 
    } 
}

所以菜單和seachbox的div改變它們的位置在480像素時，返回到他們的原始位置時調整大小回到480px以上

來源

2014-09-02 10:52:48 user2371684

jQuery更改文檔流程

回答

相關問題