Question

我想根据屏幕宽度重新排列文档流程。在我的例子中，我试图根据屏幕宽度来回重新定位两个div。

第一个是菜单div，当屏幕宽度为480px到标题div之后，我想在文档中向上移动，然后在屏幕宽度高于480px时移回到默认位置。这部分代码工作正常。

另一个div虽然，搜索框不是。在我的例子中，当屏幕宽度低于480px时，我想从另一个名为#headerRight的div元素移动form元素并将其移动到#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

Answer 1

解决了:)这是我使用的代码：

$(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在低于480px时会改变其位置，并在调整回到480px以上时恢复到原来的位置

jquery改变文档流程

1 个答案: