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

Stack Overflow用户

提问于 2012-03-10 12:46:27

回答 1查看 87关注 0票数 3

下面是问题的样子：

虽然它应该看起来像：

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

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也没有为我显示任何项目：

jquery

html

popup

javascript

回答 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 (不更改事件处理)。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9646533

复制

python使用moviepy模块对视频进行操作

视频处理

前段时间需要对多个视频进行合并，还需要对一个视频按需求进行截切成多个视频，然而网上虽然有现成的工具。

狼啸风云

2020/01/14

1.6K0