JQuery过滤选择器练习-1

标签：javascript   jquery   

在页面中,添加一个<ul>元素,里面放置多个(至少7个以上)的<li>元素,此外,再添加一个<a>元素.

 初始时:<ul>元素中仅显示5个<li>元素,其中包含还包括最后一个<li>元素,<a>元素中的显示"更多"字符.

  当点击"更多"链接时,自身内容变为"简化",同时,<ul>元素中显示全部的<li>元素.

  当点击"简化"链接时,自身内容变为"更多",同时,<ul>元素中仅显示包含最后一个<li>元素在内的5个元素.

        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <a href="#">更多</a>
        <script>
            $("li:gt(3):not(:last)").hide();
           $("a").click(function(){
            var a =$("a").html();   
            if(a =="更多") {
                $("a").html("简化");
                $("li").show();
                return;
            } 
            $("a").html("更多");
                 $("li:gt(3):not(:last)").hide();
                return;
            });
        </script>

本文出自 “theYllwRvrNo98” 博客，请务必保留此出处http://yellowriver.blog.51cto.com/8753974/1673569

JQuery过滤选择器练习-1

标签：javascript   jquery   

原文地址：http://yellowriver.blog.51cto.com/8753974/1673569