Почему переполненное меню работает плохо, когда в видимом оригинале ul 0 элементов? - PullRequest
Новая
       0

Почему переполненное меню работает плохо, когда в видимом оригинале ul 0 элементов?

3 голосов
/ 10 марта 2012

Вот как выглядит проблема: enter image description here

В то время как она должна выглядеть следующим образом:

enter image description here

Вот функция, используемая для создания всплывающего всплывающего меню: 

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

А вот и вся эта ошибка jsfiddle demo (я использую chrome для тестирования).

Интересно, что не так с моей функцией updateMenu, почемукогда все пункты меню должны быть показаны во всплывающем меню, на самом деле ни один из них не отображается (и html не вставляется в объект всплывающего меню)?

Обновление Fire Fox также не показывает никаких элементов для меня: enter image description here

1 Ответ

2 голосов
/ 10 марта 2012

Одна проблема состоит в том, что селектор, который вы формируете с помощью lastItemIndex, когда он равен нулю, является недействительным: 

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

Когда он равен нулю, это будет выглядеть как .nav li:gt(-1), и это неверно (или, по крайней мере, не работает). Если вы измените его на: 

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

, затем элементы <li> переносятся в поле «Еще».

Как отдельное примечание, вероятно, не самая лучшая идея делать обновления в обработчике "изменения размера" напрямую. Браузеры быстро запускают это событие , и выполнение всей этой работы с DOM приведет к вялому поведению. Вместо этого, вы можете сделать так, чтобы обработчик «resize» запускал таймер на 50 или 100 миллисекунд, отменяя любой предыдущий таймер, когда это происходит. Когда пользователь достаточно медленно замедлит изменение размера, сработает событие таймера, и вы сможете выполнить там работу DOM.

Здесь - это jsfiddle, обновленный с исправлением селектора (без изменений в обработке событий).

...