当可见的原始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(imaxWidth) maxWidth = $(e).width(); overflowCount++; } }); maxWidth = Math.max(maxWidth,$('.nav li:eq('+(lastItemIndex)+')').width()); var moreHeight = (overflowCount+2)*navHeight; $('#moreMenu').remove(); if(overflowCount>0){ $('
').appendTo('body').width(maxWidth+16).height(navHeight); $('#moreMenu').offset($('.nav li:eq('+(lastItemIndex)+')').offset()); $('#moreMenu').append('
More...
'); $('.nav li:gt('+(lastItemIndex-1)+')').each(function(i,e){ $('#moreMenu').append('
'+$(e).html()+'
'); }); $('#moreMenu').hover( function(){$(this).height(moreHeight);}, function(){$(this).height(navHeight);}); } } 

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

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

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

Answer 1

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

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

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

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

然后

元素被转移到“更多”框。

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

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