Question

我在使用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>

等等。为此，我试图限制子窗口列表中的项目数。在列表的第二和第三层。我对编写jQuery没有太多经验，所以任何帮助都会非常感激。

感谢。

Answer 1

假设你的限制是10个要素：

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

编辑：请参阅@linmic答案，您需要迭代每个UL，因为slice（）适用于LI的整个匹配子集（在我的情况下，所有这些都是）。

Answer 2

当我这样做时，我做了什么：将subnav class Css设置为：

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

这会将显示范围限制为30像素，并添加滚动条。

Aah ye，如果你真的想限制它显示的数据量，你必须限制从中获取数据的位置。

编辑：

类似的东西：

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

但是这仍会在代码中显示它们，只隐藏它们，如果你想完全删除它们，请使用：

$(this).destroy();

页面更快地通过代码更快地执行此操作（获取更少的数据）。

Answer 3

您可以按照以下方式执行操作（例如限制为4）：

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

我为你做了demo，欢呼。

注意：我建议您使用hide（）而不是remove（）来避免可能的问题。

Answer 4

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下拉菜单限制无序列表的大小

4 个答案: