jquery简单实现树形结构收缩展开效果

时间:2022-12-31 19:08:46

代码量很少,注意要取消冒泡   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>