ul li限制結果並在懸停時顯示更多

我有一個由PHP函數生成的ul。ul li限制結果並在懸停時顯示更多

<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來做到這一點？

來源

2012-04-18 DavidF

嘗試使用Google查詢jQuery分頁插件。 – j08691 2012-04-18 17:24:30

這是一個很好的問題，但即使你是一個初學者，你也必須自己嘗試。在問這裏之前，這是一個很好的開始。 – 2012-04-18 17:31:08

起初，你可以有這個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-18 17:31:44

對不起，錯誤點擊「發佈」。 – 2012-04-18 17:32:07

這應該有助於讓你開始。

http://jsfiddle.net/qnQ7r/

來源

2012-04-18 17:39:32 laymanje

我們需要表明我們的極限，更計數器首先：

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>'); 
}

讓我們將其作爲觸發器，並命令在mouseover上顯示隱藏的li s。

$("#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-18 17:39:54 seler

有點清潔的代碼：http://jsfiddle.net/27bvG/1/ – seler 2012-04-18 17:48:58

這裏是我會考慮*可用*的東西：http://jsfiddle.net/MYM2C/ – seler 2012-04-18 18:13:08

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-18 17:43:35

ul li限制結果並在懸停時顯示更多

回答

相關問題