列表实现树形菜单

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/MDreamlove/article/details/77452963
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>可展开列表</title>
    <style>
        .open{
            list-style-image: url(img/add.png);
        }
        .close{
            list-style-image: url(img/dec.png);
        }
        .open,.close{
            cursor: pointer;
        }
        .open ul,.close ul{
            list-style-image: none;
            cursor: default;
        }
        .open ul{
            display: none;
        }
    </style>
    <script>
        window.onload = setFunction;
        function setFunction(){
            var lis = document.getElementsByTagName('li');
            for(var i =0;i<lis.length;i++){
                if(lis[i].className == 'open')
                    lis[i].onmouseup = handlemouseup;
            }
        }
        function handlemouseup(){
            var state;
            if(this.className == 'open'){
                this.className='close';
                state='';
            }else if(this.className == 'close'){
                this.className = 'open';
                state = 'none';
            }
            var ulobj = this.getElementsByTagName('ul');
            ulobj[0].style.display = state;
        }
    </script>
</head>
<body>
<ul>
    <li class="open">
        Layer1 item1
        <ul>
            <li>Layer2 item1</li>
            <li>Layer2 item2</li>
            <li>Layer2 item3</li>
        </ul>
    </li>
    <li class="open">
        Layer1 item2
        <ul>
            <li>Layer2 item1</li>
            <li>Layer2 item2</li>
            <li>Layer2 item3</li>
        </ul>
    </li>
    <li class="open">
        Layer1 item3
        <ul>
            <li>Layer2 item1</li>
            <li>Layer2 item2</li>
            <li>Layer2 item3</li>
        </ul>
    </li>
</ul>
</body>
</html>

第二层的ul标签会继承list-style-image以及cursor属性,所以还需要将它们设置为默认值

初始状态效果图:
效果图

点击效果图:
效果图

展开阅读全文

没有更多推荐了,返回首页