1

我对以下菜单有疑问：

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 天，但仍然找不到解决方案。我曾想过在这种情况下使用 sortable ，但是它以这种方式工作吗？希望我说清楚了，如果您无法理解脚本中的某些内容，我会更好地解释。

4

2 回答 2

1

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

于 2012-11-05T09:03:05.000 回答
0

将此行更改$(domEle).prependTo("#hiddenIcons");为$(domEle).append("#hiddenIcons"); 然后它将按您的意愿正常工作。对于 egs测试小提琴

于 2012-11-05T09:06:40.403 回答