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/

谢谢Davelee

Answer 1

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

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，即使调整了窗口大小。

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

1 个答案: