3

これを変更したい：

<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>

これに（順序：メニュー、左、右）、ウィンドウのサイズを481px未満に変更すると、;

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

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

2 に答える 2

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 ID に許可されていないスペースがあります。あなたが見逃したハイフンまたはアンダースコアがあったと思います。コードにハイフンを追加しました。

また、上記のコードは、ビューポートが 481 未満の場合にメニューを追加し続けます。そのため、既に移動したらフラグなどを設定してみてください。そうしないと、複数のメニューが表示されます。

乾杯！！

于 2012-10-11T12:05:04.330 に答える
0

これが完全かどうかは確かです。ビューポート幅を 481 に設定すると、いくつかの問題に直面しました。そのため、350 に設定しました。

jsfiddle.net/CKfqv

于 2012-10-11T12:46:38.013 に答える