Question

想知道如何使用jQuery更改移动设备的DOM堆叠顺序，所以我们不必使用php。目前我正在尝试：

jQuery(document).ready(function(){

jQuery(window).resize(function() {

if (jQuery(window).width() < 768) {
    var sidebar1 = document.getElementById("sidebar1");
    var body = document.getElementById("right");
    jQuery(sidebar1).after( jQuery(right) );
    } 

    });
});

HTML：

<div class="row-fluid">
   <div id="sidebar1" class="span3">
   <div id="right" class="span9">

我可能需要使用insertAfter或prepend，但不确定。感谢

Answer 1

您不必在DOM中重新排序这些元素，您可以使用CSS和媒体查询来实现所需：

@media screen and(max-width: 768px){
    #sidebar1 { float:right; }
    #right { float: left; }
}

[edit]我看到你可能使用了bootstrap，所以conent可能是线性化的，#sidebar出现在#right上面（我假设是主要内容）在小屏幕上。如果是这种情况，那么在原始来源中交换它们，因为将主要内容放在文档源中更为通常是一种好习惯。然后使用浮动创建平板电脑/桌面版的列。 Bootstrap甚至还有一个类名：

<div class="row-fluid">
   <div id="right" class="span9 pull-right">
   <div id="sidebar1" class="span3">

Answer 2

因此，基于您的评论，我阅读了一些现有的帖子，并提出了这个，这是有效的。

jQuery(window).resize(function(){

var windowsize = jQuery(window).width();
if (windowsize < 768) {
    jQuery("#right.span9").insertBefore(jQuery("#sidebar1.span3"));
    } else {
        jQuery("#sidebar1.span3").insertBefore(jQuery("#right.span9"));
    }
});

再次感谢pawel指出我正确的方向。

更改移动设备的DOM堆叠顺序

2 个答案: