当可见的原始ul中有0个项目时，为什么溢出菜单工作不好？
当可见的原始ul中有0个项目时，为什么溢出菜单工作不好？
提问于 2012-03-10 12:46:27
下面是问题的样子：
虽然它应该看起来像：
以下是用于创建弹出溢出菜单的函数：
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的life jsfiddle demo (我使用chrome进行测试)。
我想知道我的updateMenu函数有什么问题，为什么当所有菜单项都显示在弹出菜单中时，实际上没有显示(并且没有推送到弹出菜单对象中)？
更新fire fox也没有为我显示任何项目：
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-03-10 13:03:12
一个问题是你用"lastItemIndex“组成的选择器，当它是零时，是无效的：
$('.nav li:gt(' + (lastItemIndex - 1) + ')') ...当它为零时，它看起来像.nav li:gt(-1)，这是无效的(或者至少它不起作用)。如果将其更改为：
$('.nav li:gt(' + Math.max(0, lastItemIndex - 1) + ')')然后，<li>元素被转移到"More“框。
另外，直接在“调整大小”处理程序中进行更新可能不是最好的主意。浏览器会非常迅速地触发该事件，并且执行所有的DOM工作将导致缓慢的行为。相反，您可以做的是让"resize“处理程序启动一个计时器大约50或100毫秒，当它这样做时，取消之前的任何计时器。当用户放慢调整大小的速度时，计时器事件将被触发，您可以在其中执行DOM工作。
Here是使用选择器修复更新的jsfiddle (不更改事件处理)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9646533
复制相关文章
相似问题
腾讯云开发者
