zoukankan      html  css  js  c++  java
  • jquery简单实现树形结构收缩展开效果

    代码量很少,注意要取消冒泡   e.stopPropagation();

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                .child{ display: none;}
                li{ cursor: pointer;}
            </style>
            <script src="ajaxDomain/jquery.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript" charset="utf-8">
                $(function(){
                    $("li").click(function(e){
                        e.stopPropagation();
                        var childs=$(this).children(".child");
                        if(childs.is(":hidden"))
                        {
                            childs.slideDown();
                            
                        }else
                        {
                            childs.slideUp();
                        }
                    })
                })
            </script>
        </head>
        <body>
            
            <ul>
                <li>这是第一行
                    <ul class="child">
                        <li>第一行子行
                            <ul class="child">
                                <li>三级?
                                    <ul class="child">
                                        <li>还有!?
                                        
                                            <ul class="child">
                                                <li>坑爹!?</li>
                                                <li>坑爹!?</li>
                                                <li>坑爹!?</li>
                                            </ul>
                                        </li>
                                        <li>还有!?</li>
                                        <li>还有!?</li>
                                </ul>
                                </li>
                                </li>
                                <li>三级?</li>
                                <li>三级?</li>
                                <li>三级?</li>
                                <li>三级?</li>
                            </ul>
                        </li>
                        <li>第一行子行</li>
                        <li>第一行子行</li>
                        <li>第一行子行</li>
                    </ul>
                </li>
                <li>这是第二行
                    <ul class="child">
                        <li>坑爹!?</li>
                        <li>坑爹!?</li>
                        <li>坑爹!?</li>
                    </ul>
                </li>
                <li>这是第三行</li>
            </ul>
            
        </body>
    </html>
  • 相关阅读:
    Linux6
    大小超过2t的分区规划 parted命令
    fdisk命令磁盘分区
    扩展
    磁盘管理
    在Linux中如何手动创建一个用户
    Linux5
    Linux4
    19_权限和分组
    18_django的用户模型和扩展django的用户模型
  • 原文地址:https://www.cnblogs.com/lihui1030/p/3829240.html
Copyright © 2011-2022 走看看