在浏览器调整大小时重新加载脚本

Question

我正在为响应式网站制作水平导航栏。 我创建了一个 jQuery 脚本来计算在包装之前可以显示多少列表元素。

到目前为止一切都很好......

现在回答我的问题： 如何在包装之前使用$(window).resize 重新计算列表元素的数量？

JS：

$(function () {

    var totalWidth = 0;
    var menu = $('nav ul');
    var menuWidth = menu.innerWidth();

    menu.find('li').each(function () {
        totalWidth += $(this).outerWidth();
        if (totalWidth > menuWidth) {
            console.log(totalWidth);
            $(this).before('<li class="more-content"><a>More</a><ul>'); 
            $('.nav .menu li:last').after('</li>');
            $(".more-content").nextAll().appendTo(".more-content ul");
            return false; // Abort loop
        }
    });

})

这里是 jsfiddle http://jsfiddle.net/daveleeone/vB34p/

感谢戴维利

Answer 1

创建初始化函数，在其中放置一次 idcall 的代码。

var menu = $('nav ul');

比onUpdate函数重新计算新值。

var totalWidth = 0;
var menuWidth = menu.innerWidth();
menu.find('li').each(function () {
    totalWidth += $(this).outerWidth();
    if (totalWidth > menuWidth) {
        console.log(totalWidth);
        $(this).before('<li class="more-content"><a>More</a><ul>'); 
        $('.nav .menu li:last').after('</li>');
        $(".more-content").nextAll().appendTo(".more-content ul");
        return false; // Abort loop
    }
});

致电initializaton，甚至在此致电onUpdate 一次。不仅仅是调用onUpadte 甚至是调整窗口大小。