Question

我正在使用wordpress显示按字母顺序排序的类别列表。我想在前20个链接之后使用jQuery附加“read more”链接。当用户点击“阅读更多”时，其余类别会向下滑动/显示。列表的HTML格式如下：

<ul id="catA">
    <h2>Categories</h2>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    ...
</ul>

我想将<a href="#">view all categories</a>附加到20rh类别之后的列表中，然后隐藏所有内容。在我尝试编写一些代码之前，有关最佳方法的任何想法吗？

Answer 1

我会使用:eq() selector找到第20个li元素（注意它是零索引），在它之后添加View All链接，然后使用{{3选择并隐藏你额外的li元素。您需要将一个事件处理程序附加到View All链接，该链接显示隐藏的li并自行删除。

Answer 2

我会这样做：

$('ul#catA').children('li').each(function (i)
{
    if (i > 19)
    {
        $(this).hide();   
    }
});

var more = $('<li class="cat-item"><a href="">Show More</a></li>');
$('ul#catA').append(more);

more.find('a').on('click', function (){
   $(this).parent().siblings('li').show();

   return false; 
});

以下jsfiddle显示了我的方法。

我根据@ nachito关于使用:gt()选择器的建议创建了更新的jsfiddle。我还添加了一些解释正在发生的事情的评论。

// creating the new 'Show More' link
var more = $('<li class="cat-item"><a href="">Show More</a></li>');

// hiding all lis after the first two
$('ul#catA').children('li:gt(1)').hide();

// adding the 'Show More' link
$('ul#catA').append(more);

// binding a click event to 'Show More'
more.find('a').on('click', function (){        
   // hiding 'Show More' and showing the rest of the lis in this ul 
   $(this).parent().hide().siblings('li').show();

   // preventing default action and event bubbling
   return false; 
});

Answer 3

这是最简单的解决方案，但可能有效：

在列表后创建“查看全部”链接，并为其指定一个ID，如“＃catA-viewall”;
隐藏所有项目;
仅显示前20个;

点击“查看全部”，我们会显示所有元素。

var $items = $('#catA').children();
if ( $items.length > 20 ) {
    $items.hide().slice(0, 20).show();
    $('#catA-viewall').click(function () {
        $items.fadeIn(); // or .show()
        $(this).remove();
    });
} else {
    $('#catA-viewall').remove();
}

如何使用Jquery截断长的无序列表？

3 个答案: