php - ul li 結果を制限し、ホバー時に詳細を表示

Question

ulPHP関数によって生成されました。

<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＆cssが得られ、すべてがjsによってシームレスに実行されます。

http://jsfiddle.net/27bvG/

Answer 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/

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

Answer 4

これはあなたが始めるのに役立つはずです。

http://jsfiddle.net/qnQ7r/