WEB开发 树形菜单实现

前端技术开发文档 前端开发环境怎么写 前端 微信公众号开发教程

html 代码

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>树形菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        ul {
            list-style: none
        }
        a {
            text-decoration: none
        }
        li a {
            display: block;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #999;
            padding-left: 2em
        }
        .subMenu {
            display: none;
            margin-left: 1em
        }
        .hasSub>a {
            display: block;
            background-image: url(a1.png);
            background-repeat: no-repeat;
            background-position: 10px center;
            color: #666
        }
        .showSubmenu>a {
            background-image: url(a2.png);
            background-position: 11px center;
            background-repeat: no-repeat
        }
        .ac {
            color: #000 !important;
            background-color: #efefef;
        }
        #tree {
            margin: 100px;
            width: 260px;
            padding: 10px;
            border: 1px solid #777
        }
    </style>
    <script>
        window.onload = function () {
            var tree = document.getElementById(‘tree’);
            var aLi = tree.getElementsByTagName(‘li’);
            var aLi_a = tree.getElementsByTagName(‘a’);
            for (var i = 0; i < aLi.length; i++) {
                //标记有二级菜单的li————————————
                var subMenu = aLi[i].children[1];//判断是否有二级菜单
                if (subMenu) {
                    subMenu.className = ‘subMenu’;
                    aLi[i].className = “hasSub”;
                };
                //绑定事件——————————————–
                aLi[i].show = true;//给自己增加个判断 开/关 自定义属性
                aLi[i].onclick = function (ev) {
                    var oEv = ev || window.event;
                    oEv.cancelBubble = true;//阻止事件冒泡
                    //开关 子菜单——————–
                    var subMenu = this.children[1];//是否有二级菜单
                    if (this.show) {//判断开关状态
                        if (subMenu) {
                            subMenu.style.display = “block”;
                            this.className = ‘hasSub showSubmenu’;
                            this.show = false;
                        }
                    } else {
                        subMenu.style.display = “none”;
                        this.className = ‘hasSub’;
                        this.show = true;
                    };
                    //标记当前a标签——————
                    for (var j = 0; j < aLi.length; j++) {
                        aLi_a[j].className = ”;
                    };
                    this.children[0].className = ‘ac’;
                };
            };
        }
    </script>
</head>
<body>
    <div id=”tree”>
        <ul class=”tree”>
            <li>
                <a href=”javascript:;”><i></i>一级菜单</a>
                <ul>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                    <li>
                        <a href=”javascript:;”>二级菜单</a>
                        <ul>
                            <li><a href=”javascript:;”>三级菜单</a>
                                <ul>
                                    <li><a href=”javascript:;”>四级菜单</a></li>
                                    <li><a href=”javascript:;”>四级菜单</a></li>
                                    <li><a href=”javascript:;”>四级菜单</a>
                                        <ul>
                                            <li><a href=”javascript:;”>五级菜单</a></li>
                                            <li><a href=”javascript:;”>五级菜单</a></li>
                                            <li><a href=”javascript:;”>五级菜单</a></li>
                                            <li><a href=”javascript:;”>五级菜单</a></li>
                                        </ul>
                                    </li>
                                    <li><a href=”javascript:;”>三级菜单</a></li>
                                </ul>
                            </li>
                            <li><a href=”javascript:;”>三级菜单</a></li>
                            <li><a href=”javascript:;”>三级菜单</a></li>
                            <li><a href=”javascript:;”>三级菜单</a></li>
                        </ul>
                    </li>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                </ul>
            </li>
            <li>
                <a href=”javascript:;”><i></i>一级菜单</a>
                <ul>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                    <li>
                        <a href=”javascript:;”>二级菜单</a>
                        <ul>
                            <li><a href=”javascript:;”>三级菜单</a></li>
                            <li><a href=”javascript:;”>三级菜单</a></li>
                            <li><a href=”javascript:;”>三级菜单</a></li>
                            <li><a href=”javascript:;”>三级菜单</a></li>
                        </ul>
                    </li>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                </ul>
            </li>
            <li>
                <a href=”javascript:;”>一级菜单</a>
                <ul>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                    <li>
                        <a href=”javascript:;”>二级菜单</a>
                        <ul class=”subMenu”>
                            <li><a href=”javascript:;”>三级菜单</a></li>
                            <li><a href=”javascript:;”>三级菜单</a></li>
                            <li><a href=”javascript:;”>三级菜单</a></li>
                            <li><a href=”javascript:;”>三级菜单</a></li>
                        </ul>
                    </li>
                    <li><a href=”javascript:;”>二级菜单</a></li>
                </ul>
            </li>
            <li><a href=”javascript:;”>一级菜单</a></li>
        </ul>
    </div>
</body>
</html>

微信前端界面开发视频教程 重庆前端开发怎么样 前端微信公众号开发坑

» 本文来自:前端开发者 » 《WEB开发 树形菜单实现》
» 本文链接地址:https://www.rokub.com/5418.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!