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更改文档流程

回答

相关问题