0

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

<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 做到这一点？

4

4 回答 4

2

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

var limit = 3
var more = 0

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

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

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

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

让我们让它成为一个触发器和命令来显示 hidden lis on mouseover。

$("#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/

于 2012-04-18T17:39:54.917 回答
1

首先，您可以使用此 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
});
于 2012-04-18T17:31:44.017 回答
1 
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/

于 2012-04-18T17:43:35.447 回答
0

这应该可以帮助您入门。

http://jsfiddle.net/qnQ7r/

于 2012-04-18T17:39:32.710 回答