jquery - 在溢出 :hidden element (jquery) 中查找最后一个可见的 li 元素

Question

我有一个应用了 overflow:hidden 的水平菜单。

菜单是 CMS 管理的，所以有时它不会溢出，但是当它溢出时，我想找到最后一个可见的 li 元素并插入一个下拉列表 ul，其中包含溢出的菜单项。我遇到的问题是选择最后一个可见的 li(以便在它之前插入 HTML)作为被 overflow:hidden 隐藏的元素似乎仍然算作可见。

到目前为止我的代码是:

$(window).load( function () {

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

    menu.find('li').each(function() {
       totalWidth += $(this).innerWidth() + 30; // add margin
    });

    if (totalWidth > menuWidth) {

        var num_li = $('.nav .menu ul > li:visible').length;

        $('.nav .menu ul li:nth-child('+num_li+')').append("<li><a>More</a></li>");
    }

});

变量 num_li 返回 li 元素的全部数量，而不仅仅是查看页面的人可见的那些!

Answer 1

您不能直接查询溢出的元素，因为就 DOM 而言它们不是隐藏(并且没有要检查的属性更改使用 JQuery)。

您需要根据菜单的宽度/高度检查位置。

JSFiddle 在这里:http://jsfiddle.net/TrueBlueAussie/WFGJ4/

menu.find('li').each(function () {
    totalWidth += $(this).outerWidth();
    if (totalWidth > menuWidth) {
        $(this).before("<li><a>More</a></li>");
        return false; // Abort loop
    }
});

我在菜单上设置了自动滚动，这样您就可以真正看到溢出的内容。