【代码片段】隐藏与显示部分列表

最新推荐文章于 2019-05-02 18:06:42 发布

叶炀

最新推荐文章于 2019-05-02 18:06:42 发布

阅读量964

点赞数

分类专栏：学习记录-jQuery 文章标签： jQuery

学习记录-jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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" type="text/javascript"></script>
    </head>
    
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li title="hide" style="display:none">5</li>
            <li title="hide" style="display:none">6</li>
            <li title="hide" style="display:none">7</li>
            <li>8</li>
        </ul>
        <a href="#">更多</a>
        <script>
            $("a").click(function(){
    			if($("a").html()==="更多"){
					$("a").html("简化");
					$("ul li").show();
				}else{
					$("a").html("更多");
					$("li[ title='hide']").hide();
					}
				})
        </script>
    </body>
</html>