提示的第三点:调用: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>