jQuery的菜單 - 追加一個div到另一個DIV的調整大小

Question

我有以下菜單的一個問題：

http://jsfiddle.net/H4hxA/1/

那麼，什麼腳本正在做的是，當你調整DIV，它把當沒有足夠的空間時，將主菜單項（框）放入隱藏容器中（如您從顏色中看到的那樣）。一個下拉div被附加在div的最後一個點上，這樣當點擊時，顯示隱藏的div。

$(document).ready(function(){ 
//call the method on load 
methodToFixLayout();   

$(window).bind("resize", methodToFixLayout); 

function methodToFixLayout(e) { 
    var tLengthHiddenIcons = 0; 
    var tSublinksMain = 0; 
    var sublinkWidth = 0; 
    var totalIconWidth = 0;   
    var winWidth = 0;   
    var totalIconsWidth = 24; //icon width of the dropdown 

    var memberContainerWidth = 0;   
    var totalMemberIconsWidth = 0; 


    //remove element to position it at the bottom 
    $("#pDropdown").remove(); 
    $("#profileMenuHolder div.clear").remove(); 
    $("#hiddenIcons div.clear").remove(); 
    $(".block_listing div.clear").remove();   

    $("#profileMenuContainer div.profile-sublink").each(function (index, domEle) 
    {       
     // domEle == this 
     totalIconsWidth += $(domEle).width(); 
     winWidth = $('#profileMenuHolder').width();  
     if (winWidth - totalIconsWidth > 104) 
     {  
      if($('#hiddenIcons').find(domEle).length == 1) 
      {   
       $(domEle).css('background-color','#999')     
       $('#profileMenuHolder').append(domEle); 
      } 
     }   
     else 
     { 
      if($('#profileMenuHolder').find(domEle).length == 1){ 
       $(domEle).css('background-color','#FF0')  
       $(domEle).prependTo("#hiddenIcons"); 
      } 
     }     
    }); 

    //if the hidden container is visible, enable the css for the dropdown on resize 
    if($("#hiddenIcons").is(':visible')) 
    { 
     $('<div id="pDropdown" class="dropdown active">DROP</div>').appendTo("#profileMenuHolder"); 
    } 
    else 
    { 
     $('<div id="pDropdown" class="dropdown">DROP</div>').appendTo("#profileMenuHolder"); 
    } 
    //clear floats for both div containers 
    $('<div class="clear"></div>').appendTo("#profileMenuHolder"); 
    $('<div class="clear"></div>').appendTo("#hiddenIcons"); 
    $('<div class="clear"></div>').appendTo(".block_listing"); 

    tLengthHiddenIcons = $('#hiddenIcons .profile-sublink').length; 
    //only show the dropdown if the container width doesn't satisfy the icons 
    if(tLengthHiddenIcons == 0) 
    {    
     $('#pDropdown').css("display", "none"); 
     $('#hiddenIcons').css("display", "none"); 
     //$('#profileMenuHolder').css("max-width", "1100px");    
    } 
    else 
    { 
     $('#pDropdown').css("display", "block"); 
     //$('#profileMenuHolder').css("max-width", "1150px"); 
    } 
    //on click of the dropdown 
    $("#pDropdown").click(function(){   
     jQuery('#hiddenIcons').toggle(); 
     jQuery('.arwdwn-icon').toggleClass('arwdwn-icon_active'); 
     jQuery('#pDropdown').toggleClass('active'); 
    }); 
} 
}); 

的HTML：

<div id="profileMenuContainer"> 
     <div id="profileMenuHolder"> 
      <div class="profile-sublink">1</div> 
      <div class="profile-sublink">2</div> 
      <div class="profile-sublink">3</div> 
      <div class="profile-sublink">4</div> 
      <div class="profile-sublink">5</div> 
      <div class="profile-sublink">6</div> 
      <div class="profile-sublink">7</div> 
      <div class="profile-sublink">8</div> 
      <div class="profile-sublink">9</div> 
      <div class="profile-sublink">10</div> 
      <div class="profile-sublink">11</div>   
      <div id="pDropdown" class="dropdown">DROP</div> 
     </div> 

     <div id="hiddenIcons"> 
     </div> 
    </div> 

的CSS：

body{ 
     padding:0; 
     margin:0; 
    } 
    #profileMenuHolder{background-color:#CFC; width:auto; display:block;} 
    #hiddenIcons{background-color:#C09; max-width:400px; display:none; position:absolute;} 
    .profile-sublink{background-color:#999; width:100px; height:100px; display:block; float:left; margin:0; padding:0;}  
    .clear{clear:both;}  
    .dropdown{display:none;float:left;background-color:#444; width:50px; height:50px;} 
    #pDropdown.active{background-color:#111FFF;} 

    #container{margin: 20px 300px 10px 200px;border:1px solid #111;} 
    #profileMenuContainer{overflow: hidden;min-width:100px;} 
    .image{float:left; width:155px; height:155px; border:1px solid #111;} 
    .details{float: left;background-color:red;max-width:500px;} 

問題：

該腳本可以正常使用，但遺憾的是它沒有保持項目的順序。我試圖通過在循環中指定如果循環內的項目是選定的項目來解決問題，請不要追加div。我也嘗試appendTo和prependTo div，但它仍然失去了位置。

我已經搜索了3天，現在仍然無法找到解決方案。我曾經想過在這種情況下使用可排序的方法，但是這種方式在這種情況下工作是一樣的嗎？希望我明確自己，如果你不能理解劇本中的某些內容，我會更好地解釋。

Answer 1

它失去了位置，因爲追加到#hiddenIcons的元素停留在相同的位置，其他項目保留在頂部。你可以嘗試這樣的事情：http://jsfiddle.net/H4hxA/2/

Answer 2

改變這一行$(domEle).prependTo("#hiddenIcons");到$(domEle).append("#hiddenIcons"); 那麼你want.For EGS test fiddle