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

3-13编程练习

测试过了，这个没问题。下面的那些你们测试好了再写上去行么？误人子弟 $(function(){ $("li:eq(4)").siblings("li").hide(); $("a").click(function(){ var more=$("a").html(); if (more == "更多"){$("li").show(); $("a").html("收缩"); } else{ $("li:eq(4)").siblings("li").hide();$("a").html("更多");} }); })

柒柒701

2015-11-18

源自：jQuery基础课程 3-13

关注问题我要回答

208

操作

收起

2 回答

炸猪排超人
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>
        <!-- 要引入下面这一行的 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 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>

看代码注释，要引入 jQuery 才能运行的。