提示的第三点:调用:gt()和:not(:last)来控制<li>元素显示的内容是什么鬼?
我是这样实现的。没用用到 "调用:gt()和:not(:last)来控制<li>元素显示的内容"
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>挑战题</title> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> </head> <body> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li style="display:none">列表5</li> <li style="display:none">列表6</li> <li style="display:none">列表7</li> <li style="display:none">列表8</li> <li>最后一项</li> </ul> <a href="javascript:;">更多</a> </body> <script> $("a").bind('click',function(){ if($("a").html()==="更多"){ $("a").html("简化"); $("li:hidden").show(); }else{ $("a").html("更多"); $("li:eq(3)~li").hide(); $("li:last").show(); } }); </script> </html>