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

求帮忙，我哪错了，简化功能不能实现

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    </head>
    
    <body>
       <ul>
            <li style="display:none">1</li>
            <li>2</li>
            <li >3</li>
            <li style="display:none">4</li>
            <li style="display:none">5</li>
            <li>6</li>
            <li style="display:none">7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <a href="#" onclick="lianjie()">更多</a>
        <script type="text/javascript">

            function lianjie(){
                if('更多'== $("a").html()){
                    $("li[style='display:none']").show();
                    $("a").html("简化");
                }else if("简化"==$('a').html()){
                     $("a").html("更多");
                     $("li[style='display:none']").hide();

                }
            } 
        </script>
    </body>
</html>

qq_嫵钶取玳_0

2015-12-18

源自：jQuery基础课程 3-13

关注问题我要回答

308

操作

收起

1 回答

李晓健回答被采纳 +3 积分
2015-12-18

function lianjie(){
    if('更多'== $("a").html()){
        $("li[style]").show();
        $("a").html("简化");
    }else if("简化"==$('a').html()){
        $("a").html("更多");
        $("li[style]").hide();

    }
}

你可以这样试一下，你那个不行是因为当你显示更多后那些li上的 style="display:none" 中的display:none被去掉，所以你点简化时 $("li[style='display:none']") 就找不到那些li了，所以就没有效果了。