Question

我有一个由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以上”。

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

Answer 1

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

var limit = 3
var more = 0

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

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

如果隐藏了任何li个标签信息：

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

让它成为触发器并命令在li上显示隐藏的mouseover。

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

这样你就可以获得干净的html＆amp; css，所有内容都由js无缝完成。

http://jsfiddle.net/27bvG/

Answer 2

首先，您可以使用此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
});

Answer 3

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/

Answer 4

这应该有助于您入门。

http://jsfiddle.net/qnQ7r/

ul li限制结果并在悬停时显示更多信息

4 个答案: