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 を追加しないようにループで指定することで、問題を解決しようとしました。また、div に appendTo と prependTo を追加しようとしましたが、それでも位置が失われます。

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"); すると、必要に応じて正常に機能します。たとえば、テスト フィドルの場合

于 2012-11-05T09:06:40.403 に答える