0

想知道如何使用 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，但不确定。谢谢

4

2 回答 2

3

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

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

[编辑] 我看到您可能使用引导程序，因此内容可能会被线性化并#sidebar出现#right在小屏幕上（我认为这是主要内容）。如果是这种情况，则将它们交换到原始源中，因为将主要内容放在文档源中较高的位置通常是一种好习惯。然后使用浮点数为平板电脑/桌面版本创建列。Bootstrap 甚至为此提供了一个类名：

<div class="row-fluid">
   <div id="right" class="span9 pull-right">
   <div id="sidebar1" class="span3">
于 2013-09-09T15:13:44.107 回答
0

因此，根据您的评论，我阅读了一些现有的帖子并想出了这个，这很有效。

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"));
    }
});

再次感谢帕维尔为我指明了正确的方向。

于 2013-09-09T16:41:56.543 回答