• 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>
  • 相关阅读:
    mac下安装oracle客户端
    Mac下安装tomcat
    eclipse上Git使用
    深拷贝1兼容多构造函数
    Oracle查询表大小,更新或查询太慢的时候
    Redis弱密码修改
    学习参考
    c#简单类型转换As<T>
    NPM相关
    java项目和npm项目命令窗口部署方便调试
  • 原文地址:https://www.cnblogs.com/lihui1030/p/3829240.html
Copyright © 2020-2023  润新知