列表实现树形菜单

最新推荐文章于 2019-08-09 12:33:59 发布

小萝莉_Lolita

最新推荐文章于 2019-08-09 12:33:59 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： DIV+CSS 文章标签： ul 树形菜单

本文链接：https://blog.youkuaiyun.com/MDreamlove/article/details/77452963

DIV+CSS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的可展开列表实现方案，使用HTML、CSS和JavaScript来创建动态显示隐藏的二级列表。通过修改li元素的class可以控制子列表的展开与折叠。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>