jQuery - 调整浏览器大小时移动div

时间:2012-10-11 11:22:07

标签: jquery resize responsive-design prepend

我想改变这个:

<div id="main 1" style="background: #ccc;" class="fourcol first clearfix" role="main">
LEFT
</div>

<div id="main middle" style="background: #ddd;" class="fourcol middle clearfix" role="main">
MENU
</div>  

<div id="main 3" style="background: #eee;" class="fourcol last clearfix" role="main">
RIGHT
</div> 

到此(顺序:MENU,LEFT,RIGHT)当我调整481px以下窗口的大小时,用;

jQuery(document).ready(function($) {

$(window).resize(function() {
    var responsive_viewport = $(window).width();
    if (responsive_viewport < 481) {
            $('#inner-content').parent().prependTo('middle');
    }
});

2 个答案:

答案 0 :(得分:1)

使用此

$(window).resize(function() {

   var responsive_viewport = $(window).width();

   //console.log(responsive_viewport);
   if (responsive_viewport < 481) {
      var middle_div = $('#main-middle').clone().remove();
      $("#main-1").before(middle_div);
   }
});

你的div有空间是不允许的。我猜你有错过的连字符或下划线。我在代码中添加了连字符。

此外,上述代码在视口&lt;因此,一旦它已经移动,尝试设置一个标志或东西。否则你将有多个菜单。

干杯!!

答案 1 :(得分:0)

我注意到这是否完整。当我将视口宽度设置为481时,我遇到了一些问题。 所以我把它设置为350

jsfiddle.net/CKfqv