首页 \ 问答 \ jQuery显示隐藏的li元素，但随后隐藏了可见的li元素(jQuery show hidden li elements, but then hide visible li elements)

jQuery显示隐藏的li元素，但随后隐藏了可见的li元素(jQuery show hidden li elements, but then hide visible li elements)

 以下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/ 

The following jQuery code calls the ul element, finds the first three li list items within the element and hides the remaining li items. Then, it appends an li element which says "Show more..." and, when clicked, reveals the previously hidden list items. 
(jsFiddle at bottom of question) 
$('ul')
  .find('li:gt(2)')
  .hide()
  .end()
  .append(
    $('<li>Show more...</li>').click( function(){
      $(this).siblings(':hidden').fadeIn(500);
   })
);
 
Simple enough. Now, in addition to showing the hidden list items when the user clicks "Show more...", I need it to also hide the first three list items which are originally left visible. By illustration: 
 
What the code currently generates: 
 - List Item #1
 - List Item #2
 - List Item #3
 - Show more...
 
(click) 
 - List Item #1
 - List Item #2
 - List Item #3
 - List Item #4
 - List Item #5
 - Show more...
 
 
What needs to occur: 
 - List Item #1
 - List Item #2
 - List Item #3
 - Show more...
 
(click) 
 - List Item #4
 - List Item #5
 - Show more...
 
 
For usability purposes, I would also be nice if when "Show more..." is clicked again, the first three list items become visible again and the remaining list elements are hidden. 
jsFiddle: http://jsfiddle.net/g9L9R/

原文：https://stackoverflow.com/questions/14018381