为了账号安全,请及时绑定邮箱和手机立即绑定

参考各方答案

<!DOCTYPE html>
<html>
    <head>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>challenge</title>
    </head>
    
    <body>
    <ur>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
        <li>li 5</li>
        <li>li 6</li>
        <li>li 7</li>
        <li>li 8</li>
     </ur>
        <a href="javascript:;">更多</a></a>
  

        
    </body>
    <script type="text/javascript">
       $("li:gt(4)".hide()
       $("a").click(function(){
            if( $("a").text() === "更多"){
                $("a").text('简化');
                $("li:gt(4)".css("display","list-item")
            }else{
                $("a").text('更多');
                $("li:gt(4)").hide()
            }
       })
    </script>
</html>


正在回答

1 回答

错误一:无序列表标签是ul,你写成了ur;

错误二:a标签后面多写了个</a>;

错误三:整体功能没有实现。我的代码如下,仅供参考:

<!DOCTYPE html>
<html>
    <head>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>changeLength</title>
    </head>
     
    <body>
    <ul>
        <li class="show">li 1</li>
        <li class="show">li 2</li>
        <li class="show">li 3</li>
        <li class="show">li 4</li>
        <li>li 5</li>
        <li>li 6</li>
        <li>li 7</li>
        <li class="show">li 8</li>
     </ul>
    <a>更多</a>
    <script type="text/javascript">
    
        // 函数f_hidden用来隐藏部分列表项
        function f_hidden(){
            $("li[class!=show]").hide();
            $("a").attr("href","javascript:f_show()");
            $("a").html("更多");
        }
        
        // 函数f_show用来显示部分列表项
        function f_show(){
            $("li[class!=show]").show();
            $("a").attr("href","javascript:f_hidden()");
            $("a").html("简化");
        }

        // 初始化页面时,先执行一次函数f_hidden
        f_hidden();
        
    </script>
    </body>
</html>


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

举报

0/150
提交
取消
jQuery基础课程
  • 参与学习       154768    人
  • 解答问题       7184    个

加入课程学习,有效提高前端开发速度

进入课程

参考各方答案

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信