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...

---

出于可用性目的,如果再次单击"显示更多...",前三个列表项将再次可见,其余列表元素将被隐藏,我也会很高兴.

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

你会在这里得到一个很好的切换效果......