Question

当我在这里帮助另一位成员时，我遇到了一个我自己的问题。

来回缩小窗格。您会注意到菜单项会填充更多菜单。

但是我在JS的底部做这个：

detectOverflow();
$('.overflow-items ul').reverseChildren();
detectOverflow();

因为当菜单处于某个位置时，如果我只在初始加载时调用该函数：

http://note.io/1pkrydl

通过删除其中一个函数调用来自行尝试：

detectOverflow();
$('.overflow-items ul').reverseChildren();

一旦你开始调整I image的大小，问题就会自动解决，因为此时再次调用该函数。

我花了几个小时试图清理我的代码并弄清楚为什么会出现这种情况，但我似乎无法弄明白。

Answer 1

问题是“更多”菜单，更精确的是padding-right属性，当项目位置被审核时菜单被隐藏且导航包装器没有应用“填充右”样式，所以，第3个元素放在第一个导航行中，但是当显示“更多”菜单并应用填充时，第3个元素将被换行到新行。

我将初始的padding-right值设置为计算项目位置：http://jsfiddle.net/93fBP/11/

$('.primary-nav-wrapper').css('padding-right', 40);

// Initial run of detect Overflow
detectOverflow();
$('.overflow-items ul').reverseChildren();
//detectOverflow();

我改变了项目如何传递到“更多”菜单的方式，以避免一旦应用补丁后产生二次效果，由于项目立即被移动，有些情况下元素，例如，第三个，大，移动到“更多”菜单，但第四个显示在主导航栏中，因为它更小。所以为了解决这个问题，我会在处理完所有项目后将所有元素移动到“更多”菜单。新代码不应该有任何问题。

detectOverflow（）中的新代码是：

    var more_items = []
    $('.primary-nav li').each(function () {
        if (more_items.length > 0) {
            more_items.push($(this))
            return;
        }
        var $this = $(this),
            elemPos = $this.position().top - ulPos;
        // Figure out the width of the combined li margins
        liTotalWidth = liTotalWidth + parseInt($(this).css('marginLeft'), 10) + $(this).outerWidth();

        // Check if the link dropped down to the second line
        // If it did put it in the more menu
        if (elemPos > 0) {
            more_items.push($this);
        }
    });

    $(more_items).each(function() {
        $(this).prependTo('.overflow-items ul');
        liCount = $('.primary-nav li').length;
    });

函数调用一次时换行

1 个答案: