当可见的原始ul中有0个项目时，为什么溢出的菜单工作不好？

Question

以下是问题的样子：

虽然看起来应该是这样的：

这是用于创建弹出溢出菜单的功能：

function updateMenu(){
    var lastItemIndex = Number.POSITIVE_INFINITY;
    var lastItemText = "";
    var maxWidth = 0;
    var overflowCount=0;
    var navHeight = $('.nav').height();
    $('.nav li').each(function(i,e){
    console.log($(e).position().top);
        if($(e).position().top>=navHeight){
            if(i<lastItemIndex) lastItemIndex=i-1;
            if($(e).width()>maxWidth) maxWidth = $(e).width();
            overflowCount++;
        }
    });
    maxWidth = Math.max(maxWidth,$('.nav li:eq('+(lastItemIndex)+')').width());
    var moreHeight = (overflowCount+2)*navHeight;
    $('#moreMenu').remove();
    if(overflowCount>0){
        $('<ul id="moreMenu"/>').appendTo('body').width(maxWidth+16).height(navHeight);
        $('#moreMenu').offset($('.nav li:eq('+(lastItemIndex)+')').offset());
        $('#moreMenu').append('<li>More...</li>');
        $('.nav li:gt('+(lastItemIndex-1)+')').each(function(i,e){
            $('#moreMenu').append('<li>'+$(e).html()+'</li>');
        });
        $('#moreMenu').hover(
            function(){$(this).height(moreHeight);},
            function(){$(this).height(navHeight);});
    }
}

这是这个bug的生活jsfiddle demo（我使用chrome进行测试）。

我想知道我的updateMenu函数有什么问题，为什么当所有菜单项都显示在弹出菜单中时，实际上没有显示（并且没有html被推入弹出菜单对象）？

更新火狐也没有显示任何物品给我：

Answer 1

一个问题是你用“lastItemIndex”形成的选择器，当它为零时，是无效的：

$('.nav li:gt(' + (lastItemIndex - 1) + ')') ...

当它为零时，它看起来像.nav li:gt(-1)并且无效（或者至少它不起作用）。如果您将其更改为：

$('.nav li:gt(' + Math.max(0, lastItemIndex - 1) + ')')

然后将<li>元素转移到“更多”框。

作为一个单独的注释，直接在“resize”处理程序中进行更新可能不是最好的主意。浏览器快速触发非常事件，并且完成所有DOM工作将导致行为迟缓。相反，你可以做的是让“resize”处理程序启动一个可能50或100毫秒的计时器，当它这样做时取消任何先前的计时器。当用户放慢调整大小时，会触发计时器事件，你可以在那里进行DOM工作。

Here是使用选择器修复更新的jsfiddle（不更改事件处理）。