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

基础jQ问题，3-13节。

初始时:<ul>元素中仅显示5个<li>元素,其中包含还包括最后一个<li>元素,<a>元素中的显示"更多"字符.

当点击"更多"链接时,自身内容变为"简化",同时,<ul>元素中显示全部的<li>元素.

当点击"简化"链接时,自身内容变为"更多",同时,<ul>元素中仅显示包含最后一个<li>元素在内的5个元素.

坚强的波波

2015-11-05

源自：jQuery基础课程 3-13

关注问题我要回答

436

操作

收起

2 回答

坚强的波波提问者
2015-12-23

谢谢啦

0 回复有任何疑惑可以回复我~

收起回答

炸猪排超人
2015-11-23

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
        <style>
            li{display:none;}
            .show{display:block;}
        </style>
        <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 class="">item05</li>
          <li class="">item06</li>
          <li class="show">item07</li>
        </ul>
        <a href="#">更多</a>
        <script>
            $("a").click(function(){
                var $this = $(this),
                    val = $this.html();
                if(val === '更多'){
                    $this.html('简化');
                    $('li').addClass('show');
                }else{
                    $this.html('更多');
                    $('li.flag~li').removeClass('show');
                    $('li:last-child').addClass('show');
                }
                return false;
            });
        </script>
    </body>
</html>