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>
  • 相关阅读:
    HTML5和CSS3的学习视频
    webpack中bundler源码编写2
    webpack中bundler源码编写
    webpack中如何编写一个plugin
    webpack多页面打包配置
    webpack中配置eslint
    webpack解决单页面路由问题
    webpack中使用WebpackDevServer实现请求转发
    webpack中typeScript的打包配置
    rsync 同步
  • 原文地址:https://www.cnblogs.com/lihui1030/p/3829240.html
Copyright © 2011-2022 走看看