jquery实现全部，收起，展开，显示，隐藏的类似下拉样式切换小例子，.parent()和.parents()的区别...

于 2016-10-10 13:57:00 发布
阅读量203 收藏
点赞数
文章标签： javascript xhtml python ViewUI
原文链接：https://my.oschina.net/iioschina/blog/756274
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

 

方法1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>下拉全部收起例子</title>
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
    .test {
        padding: 10px;
        color: #999999;
        line-height: 150%;
        padding-bottom: 15px;
        border-bottom: 1px dotted #CCCCCC;
    }
    
    ul {
        list-style-type: none;
    }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>
                <div class=test>
                    <ul style='margin-top:0'>
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                        <li>d</li>
                        <li>d</li>
                        <li>d</li>
                        <li>d</li>
                        <li>d</li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class=test>
                    <ul style='margin-top:0'>
                        <li>g</li>
                        <li>h</li>
                        <li>j</li>
                        <li>k</li>
                        <li>k</li>
                        <li>k</li>
                        <li>k</li>
                        <li>k</li>
                        <li>k</li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class=test>
                    <ul style='margin-top:0'>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>4</li>
                        <li>4</li>
                        <li>4</li>
                        <li>4</li>
                        <li>4</li>
                    </ul>
                </div>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
    $(function() {

        $(".test ul").find("li:gt(2)").hide();

        $(".test ul").find("li:last").after("<div class='show'><a>全部>></a></div>");

        showAndHide();


    });

 

    function showAndHide() {

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

            $(this).parent().find("li:gt(2)").slideToggle();
            var temp = $(this).find("a");
            temp.html() == "全部&gt;&gt;" ? temp.html("收起&gt;&gt;") : temp.html("全部&gt;&gt;");


        });
    }
    </script>
</body>

</html>

 

方法2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>下拉全部收起例子</title>
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
    .test {
        padding: 10px;
        color: #999999;
        line-height: 150%;
        padding-bottom: 15px;
        border-bottom: 1px dotted #CCCCCC;
    }
    
    .active {
        color: red;
    }
    
    ul {
        list-style-type: none;
    }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>
                <div class=test>
                    <ul style='margin-top:0'>
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                        <li>d</li>
                        <li>d</li>
                        <li>d</li>
                        <li>d</li>
                        <li>d</li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class=test>
                    <ul style='margin-top:0'>
                        <li>g</li>
                        <li>h</li>
                        <li>j</li>
                        <li>k</li>
                        <li>k</li>
                        <li>k</li>
                        <li>k</li>
                        <li>k</li>
                        <li>k</li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class=test>
                    <ul style='margin-top:0'>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>4</li>
                        <li>4</li>
                        <li>4</li>
                        <li>4</li>
                        <li>4</li>
                    </ul>
                </div>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
    $(function() {

        $(".test ul").find("li:gt(2)").hide();

        $(".test ul").find("li:last").after("<div class='show'>all</div>");

        showAndHide();

 

    });

 

    function showAndHide() {

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

            $(this).toggleClass("active");
            console.log($(this).html() == 'all');
            $(this).html($(this).html() == 'all' ? 'close' : 'all');
            $(this).parent().find("li").toggle();

 

        });
    }
    </script>
</body>

</html>

 

 

 

 

.parent()获得当前元素上一级父元素

 

和.parents()获得所有的祖籍父元素

转载于:https://my.oschina.net/iioschina/blog/756274

weixin_34259232
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值