ul li 限制结果并在悬停时显示更多答案

【问题标题】：ul li limit results and show more on hoverul li 限制结果并在悬停时显示更多
【发布时间】：2012-04-18 17:22:18
【问题描述】：

我有一个由 PHP 函数生成的ul。

<ul> 
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</li>

我想以这种方式“限制”结果并显示列表（在 HTML 页面中）

Item1 - Item2 - 3 more...

鼠标悬停后必须显示“3 more”。

这可能吗？我怎样才能用 jQuery 做到这一点？

【问题讨论】：

尝试谷歌搜索 jQuery 分页插件。
这是一个很好的问题，但即使你是初学者，你也必须自己尝试。在这里提问之前，这是一个非常好的开始方式。

标签： php jquery css html-lists

【解决方案1】：

首先我们需要说明我们的限制和更多计数器：

var limit = 3
var more = 0

然后我们可以隐藏所有超出我们限制的lis：

$("#tricky_list li").each(function(index) {
    if(index >= limit){
        $(this).hide();
        more++;
    }
});

如果有li标签隐藏地点信息：

if(more){
    $("#tricky_list").append('<li class="more">' + more + ' more</li>');
}

让我们让它成为一个触发器并命令在mouseover上显示隐藏的lis。

$("#tricky_list li.more").live("mouseover", function(){
    $("#tricky_list li").each(function(index) {
            $(this).show();
    });
    $("#tricky_list li.more").hide()
});

这样你就有了干净的html&css，一切都由js无缝完成。

http://jsfiddle.net/27bvG/

【讨论】：

【解决方案2】：

var numToShow = 3;
var moreLi;
$('ul').children('li').hide().each(function() {
    if ($(this).index() < numToShow) {
        $(this).show();
    }
}).parent('ul').append('<li><a href="#" id="showMore">More</a></li>');

$('#showMore').click(function() {
    moreLi = $(this).parent('li');
    moreLi.siblings().show();
    moreLi.remove();
});

可能有一种更有效的方法来编写它，而且它肯定会更健壮，但这是您正在寻找的快速方法。

示例：http://jsfiddle.net/3Ak2X/

【讨论】：

【解决方案3】：

首先，您可以使用这个 CSS

ul li:nth-child(-n+5) {display:none}  /* Shows only first 5*/
.showAll {display:block;}

然后悬停就可以了..

$('ul')
.mouseover(function(){
    $(this).find('li').filter(':not(:visible)').addClass('showAll'); 
    //shows hidden li's
})
.mouseout(function(){
    $(this).find('li.showAll').removeClass('showAll');
    //hides those li's
});

【讨论】：

抱歉，误点击“发帖”。

【解决方案4】：

这应该可以帮助您入门。

http://jsfiddle.net/qnQ7r/

【讨论】：