Question

我在使用以下菜单时出现问题：

所以，脚本正在做的是当你调整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。我也尝试过追加和前置到div，但它仍然失去了位置。

我已经搜索了3天，但仍无法找到解决方案。我曾想过在这种情况下使用sortable但是它以这种方式工作相同吗？希望我清楚自己，如果你不能理解剧本中的某些内容，我会更好地解释。

Answer 1

它失去了位置，因为附加到#hiddenIcons的元素保持在同一位置而其他项目位于顶部。你可以尝试这样的事情：http://jsfiddle.net/H4hxA/2/

Answer 2

将此行$(domEle).prependTo("#hiddenIcons");更改为$(domEle).append("#hiddenIcons"); 然后它会正常工作。对于egs test fiddle

jQuery菜单 - 在调整大小时将div附加到另一个div

2 个答案: