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

真的太简单了

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</body>

</html>

$("a").click(function(){

$("a").html('简化');

$("li:hidden").show();

})

</script>

莫忘初始

2015-06-06

源自：jQuery基础课程 3-13

关注问题我要回答

551

操作

收起

2 回答

成者并非一蹴而就
2015-06-07

少用行内样式...不利于维护;

这位同学的写法就可以参考参考...结构简单,样式分离,且容易理解

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑战题</title>
<style>
    .no{display:none;}
</style>
</head>
<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li class="no">55</li>
        <li class="no">66</li>
        <li>77</li>
    </ul>
    <a href="#" id="aaa">更多</a>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script>
        $(function(){
            $("#aaa").click(function(){
                var text = $("#aaa").text();
                if(text == "更多"){
                    $("#aaa").html("简化");
                    $("li[class=no]").show();
                }else{
                    $("#aaa").html("更多");
                    $("li[class=no]").hide();
                }
            });
        });
    </script>
</body>
</html>