限制使用jQuery一个无序列表的大小下拉菜单

我使用jQuery来限制一个UL列表的大小有问题。 我有一个在下拉菜单中使用了非常大的多层名单。 一些子菜单的有一吨在他们的项目,我想设置的15-20的限制所以列表不会跨越整个页面。

这里基本上是列表的样子:

<ul id="nav"> <li><a href="#">Link 1</a> <ul class="subnav"> <li><a href="#">Sub Link 1</a> <ul class="subnav"> <li><a href="#"> Sub Link 1</a></li> <li><a href="#"> Sub Link 2</a></li> </ul> </li> <li><a href="#">Sub Link 2</a></li> <li><a href="#">Sub Link 3</a></li> </ul> </li>

等等。 对于这个我试图以限制subnav列表中的项目数。 在列表中的第二层和第三层。 我不是非常有经验与jQuery的书面所以任何帮助将不胜感激。

谢谢。

--------------解决方案-------------

比方说,你的极限是10个元素:

$('ul.subnav > li').slice(10).remove();

编辑:[email protected],你需要遍历每个UL因为切片()工作在LIS的整体匹配的子集(所有的人,在我的情况)。

我所做的,当我有这就是:一套subnav类CSS来:

.subnav { height: 30px; overflow: auto; }

这将放映范围限制为30像素,并添加一个滚动条。

AAH咋的,如果你真的想限制数据,它显示的金额,你必须把一个限制,它从获取数据。

编辑:

就像是:

var amount = 0;
$('.subnav li').each(function() {
amount++
if (amount > 5) {
$(this).hide();
}
});

但是这仍然会在代码中显示出来,只是隐藏起来,如果你想让他们完全去除,使用:

$(this).destroy();

它仍然更快的页面通过前面的代码做(取更少的数据)。

你可以简单地做如下(比如限制为4):

$('ul.subnav').each(function() { $(this).children('li').slice(4).hide(); });

而我做给你演示,欢呼声。

注:我建议你使用隐藏(),而不是remove()方法,以避免可能出现的问题。

var leave = 3; // amount of items to be left in the menu
$('ul.subnav').each(function() {
var $li = $(this).children().gt(leave - 1).hide();

// optional - if you want to show them on user click
$('<li><a href="#">...</a></li>')
.appendTo(this)
.find('a').click(function() {
$(this).hide();
$li.show();
})
})

希望它帮助。

分类:jQuery的 时间:2012-09-24 人气:0
本文关键词: HTML和jQuery
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.672 (s). 9 q(s)