2013-02-11 93 views
1

需要一些幫助和建議。長篇小說我有一個3欄的網站。響應式jquery

<div id="left-col">Some content</div> 
<div id="mid-col">Some content</div> 
<div id="right-col">Some content</div> 

當瀏覽器窗口低於1000px時,我執行以下操作。

$(window).on('resize', function() { 

if ($(window).width() < 1000) {   
    $("#right-col").appendTo('#left-col'); 
    $("#mid-col").css("max-width","785px"); 
} 
}); 

現在使用appendTo心不是最好的解決方案,因爲它需要整個< DIV ID =「右山坳」 >和地方的div內。我最初的想法是隻是將html移動到右側欄中,並將其附加到左側欄的末尾。

無論如何... 我怎樣才能得到它回彈出左col,並返回到它的原始位置,當瀏覽器大於1000px;

這是一個jsfiddle它。 http://jsfiddle.net/C7k5b/

回答

2

難道你不會再把它追回來嗎?

$(document).ready(function() { 
    $(window).on('resize', function() { 
     if ($(window).width() < 500) {  
      $("#right-col").appendTo('#left-col'); 
     }else{ 
      $("#right-col").appendTo($('#left-col').parent()); 
     } 
    }); 
}); 

FIDDLE

+0

嗯,我想這只是沒有辦法的辦法,你做到了。你可以向我解釋背後的邏輯($('#left-col')parent()) – ipixel 2013-02-11 19:57:14

+0

由於兩個coloumns本來是兄弟姐妹,所以當你在另一箇中追加一個時,你可以通過將它附加到父母等。這取決於HTML的結構,但同樣的原則適用。 jQuery有很多DOM遍歷方法,您可以隨時再次找到原始父級。 – adeneo 2013-02-11 20:03:25

+0

我剛剛測試過它,它「工作」,但它會導致一個奇怪的CSS問題。因爲jquery在調整窗口大小時會反應很多次,所以右下角上的內容向下移動的高度與mid-col上下的高度相同。你的代碼只能在else下工作,如果> 500或者即使我使用了其他if也不行。有任何想法嗎? – ipixel 2013-02-11 20:05:35