4

我有一个带有溢出的水平菜单：隐藏应用于它。

该菜单由 CMS 管理，因此有时它不会溢出，但是当它溢出时，我想找到最后一个可见的 li 元素并插入一个下拉菜单，其中包含溢出的菜单项。我遇到的问题是选择最后一个可见的 li（以便在它之前插入 HTML）作为被溢出隐藏的元素：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 元素，而不仅仅是查看页面的人可见的元素！

4

2 回答 2

6

您不能直接查询溢出的元素，因为它们没有隐藏就 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
    }
});

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

于 2013-09-13T14:08:44.677 回答
2

我只需要自己想出一个解决方案，所以我想我会分享它，希望它会对某人有所帮助：

function getVisible($elements, $container) {
    return $elements.filter(function (i, e) {
        var $e = $(e);

        return ($e.offset().left >= $container.offset().left) && ($e.offset().left + $e.width() <= $container.offset().left + $container.width());
    });
}

*编辑 - 这仅用于水平测试可见元素。对于垂直，您需要添加针对offset().topvs.$container.height()等的测试。

于 2016-11-15T15:10:34.213 回答