隱藏所有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(); 
    }); 

需要.less{display:none}

演示的CSS規則：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(); 
     });