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