隐藏所有li元素并显示前2个并按按钮切换它们

Question

假设我有

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

我希望jQuery代码隐藏所有<li>然后显示拳头和第二个然后append()另外<li>more</li>用于切换隐藏的li.

Answer 1

这应该做..

// hide all li and then show the first two
$('ul li').hide().filter(':lt(2)').show(); 

// append a li with text more that on click will show the rest
$('ul').append('<li>more</li>').find('li:last').click(function(){
    $(this).siblings(':gt(1)').toggle();
});

演示:http://jsfiddle.net/gaby/tNGxN/2/

更新以将更改文本从更多更改为更少..

$('ul li')
    .hide()
    .filter(':lt(2)')
    .show();

$('ul')
    .append('<li><span>more</span><span class="less">less</span></li>')
    .find('li:last')
    .click(function(){
        $(this)
            .siblings(':gt(1)')
            .toggle()
            .end()
            .find('span')
            .toggle();
    });

需要一个css规则 .less{display:none}

演示:http://jsfiddle.net/gaby/tNGxN/3/

Answer 2

这有点像你在找？

 $('li').hide()
        .slice(0,1)
        .addClass('fixed')
        .show();
 $('<li class="toggle">more</li>')
        .appendTo('ul')
        .click( function() {
             $('li:not(.toggle,.fixed)').toggle();
         });