我有一个水平菜单,溢出:隐藏应用于它。
菜单是CMS管理的,所以有时它不会溢出,但是当它溢出时我想找到最后一个可见的li元素并插入一个下拉ul,其中包含溢出的菜单项。我遇到的问题是选择最后一个可见的li(为了在它之前插入HTML)作为溢出隐藏的元素:隐藏似乎仍被视为可见。
到目前为止我的代码是:
$(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元素,而不仅仅是查看页面的人可见的元素!
答案 0 :(得分:6)
您无法直接查询溢出的元素,因为就DOM而言,它们不是隐藏(并且没有要检查的属性更改)用JQuery)。
您需要根据菜单的宽度/高度来检查位置。
menu.find('li').each(function () {
totalWidth += $(this).outerWidth();
if (totalWidth > menuWidth) {
$(this).before("<li><a>More</a></li>");
return false; // Abort loop
}
});
我在菜单上设置了自动滚动,这样您就可以看到溢出的内容。
答案 1 :(得分: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().top
与$container.height()
等添加测试。