javascript - jQuery 显示隐藏的 li 元素，然后隐藏可见的 li 元素

Question

以下 jQuery 代码调用 ul 元素，查找元素内的前 三个 li 列表项，并隐藏剩余的 li 项目。然后，它附加一个 li 元素，其中显示“显示更多...”，并且在单击时显示之前隐藏的列表项。

(jsFiddle位于问题底部)

$('ul')
  .find('li:gt(2)')
  .hide()
  .end()
  .append(
    $('<li>Show more...</li>').click( function(){
      $(this).siblings(':hidden').fadeIn(500);
   })
);

足够简单。现在，除了在用户单击“显示更多...”时显示隐藏的列表项之外，我还需要它隐藏最初的前三个列表项留下可见。举例来说:

<小时/>

代码当前生成的内容:

 - List Item #1
 - List Item #2
 - List Item #3
 - Show more...

(点击)

 - List Item #1
 - List Item #2
 - List Item #3
 - List Item #4
 - List Item #5
 - Show more...

<小时/>

需要发生什么:

 - List Item #1
 - List Item #2
 - List Item #3
 - Show more...

(点击)

 - List Item #4
 - List Item #5
 - Show more...

<小时/>

出于可用性目的，如果再次单击“显示更多...”时，前三个列表项再次可见并且其余列表元素隐藏，我也会很好。 p>

jsFiddle:http://jsfiddle.net/g9L9R/

Answer 1

请参阅:http://jsfiddle.net/g9L9R/7/

$('ul')
.find('li:gt(2)')
.hide()
.end()
.append(
  $('<li>Show more...</li>').click( function(){
  $(this).siblings().toggle(500);
})
);​

您将在这里获得不错的切换效果...