温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JQuery过滤选择器练习-1

发布时间:2020-07-21 08:48:38 来源:网络 阅读:702 作者:黄河98号 栏目:web开发

在页面中,添加一个<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>


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI