                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

贴一套我的答案，可以运行的，给大家参考，不需要回答，谢谢。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>挑战题</title>
    <style>
        /* 题目说是显示5个而已，我先把所有的li都隐藏，然后加 .show 显示固定的5个 */
        li{display:none;}
        .show{display:block;}
    </style>
    <!-- 引入jQuery库文件 -->
    <script src="https://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li class="show">item01</li>
    <li class="show">item02</li>
    <li class="show">item03</li>
    <li class="show flag">item04</li>
    <li>item05</li>
    <li>item06</li>
    <!-- 下面这些都一样的，我就压缩一下，免得太长了拖滚动条看不方便 -->
    <li>item07</li><li>item08</li><li>item09</li><li>item10</li><li>item11</li><li>item12</li><li>item13</li><li>item14</li><li>item15</li><li>item16</li><li>item17</li><li>item18</li><li>item19</li>
    <li class="show">item20</li>
  </ul>
    
  <a href="#">更多</a>
    
  <script>
    //绑定a标签的点击事件
    $("a").click(function(){
      //因为 a 标签多次使用，把它缓存起来，$ 开头表示它是一个jQuery对象
      var $this = $(this),
      //获取 a 标签的文字
          val = $this.html();
      //如果当前显示的文字是“更多”
      if(val === '更多'){
        //a 标签的文字变成 “简化”，else里面就反过来
        $this.html('简化');

        //获取所有的li标签，然后全部都加上“show”这个class，然后所有li都显示了
        $('li').addClass('show');
        
      }else{ //如果当前显示的文字是“简化”
        $this.html('更多');

        //在第四个 li 标签加了 flag 这个class
        //这里获取 flag 后面所有的 li 标签，然后移除 show 样式，就全部都隐藏了（因为li被默认隐藏了）
        $('li.flag~li').removeClass('show');

        //把最后一个 li 加上 show 样式，这样最后一个就隐藏了
        $('li:last-child').addClass('show');
      }

      //返回 false，阻止 a 标签默认的行为
      return false;
    });
  </script>
</body>
</html>