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

以下是问题的情况：

虽然它应该看起来像：

以下是用于创建弹出式溢出菜单的函数：

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);});
    }
}

函数更新单元（）{
var lastItemIndex=Number.POSITIVE_∞；
var lastItemText=“”；
var maxWidth=0；
var溢出计数=0；
var navHeight=$（'.nav'）.height（）；
$（'.nav li'）。每个（函数（即，e）{
console.log（$（e）.position（）.top）；
如果（$（e）.position（）.top>=导航高度）{
if（imaxWidth）maxWidth=$（e）.width（）；
溢出计数++；
}
});
maxWidth=Math.max（maxWidth，$（'.nav-li:eq（+（lastItemIndex）+'））.width（）；
var moreHeight=（溢出计数+2）*导航高度；
$（“#更多菜单”）.remove（）；
如果（溢出计数>0）{
$（'ul id=“moreMenu”/>）.appendTo（'body'）.width（maxWidth+16）.height（navHeight）；
$（'#moreMenu'）.offset（$（'.nav-li:eq（+（lastItemIndex）+'）.offset（））；
$（“#更多菜单”）.append（“
更多…
”）；
$（'.nav li:gt（+（lastItemIndex-1）+'））。每个（函数（i，e）{
$（“#更多菜单”）.append（“
”+$（e.html（）+”
）；
});
$（“#更多菜单”）。悬停(
函数（）{$（this）.height（moreheath）；}，
函数（）{$（this）.height（navHeight）；}）；
}
}

下面是这个bug的中间部分（我使用chrome进行测试）

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

更新fire fox也不会为我显示任何项目：

---

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

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

当它为零时，看起来像

.nav li:gt（-1）

，这是无效的（或者至少它不起作用）。如果将其更改为：

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

然后将

元素转移到“更多”框中

另请注意，直接在“调整大小”处理程序中进行更新可能不是最好的方法。浏览器会很快触发该事件，而做所有DOM工作都会导致行为迟缓。相反，您可以让“resize”处理程序启动一个计时器50或100毫秒，在它启动计时器时取消之前的任何计时器。当用户足够慢地调整大小时，计时器事件将触发，您可以在其中执行DOM工作

---

JSFIDLE是否更新了选择器修复程序（事件处理没有更改）。

@Pointy:遗憾的是，对我来说不是（（此菜单有点‘响应’——它查看当前分辨率，并找出要弹出到弹出菜单中的项目数。）所以要看到这个bug，你实际上需要用事件处理来缩小页面宽度，喜欢它。顺便说一句，

Search\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu。当“lastItemIndex”为零时，真正应该发生的是，选择器的设置应该完全没有“：gt（）”。这样就可以把他们都弄到手了。