0%

纯CSS实现可折叠树状菜单

发表于 更新于 分类于 阅读次数：
本文字数： 1.9k 阅读时长 ≈ 2 分钟

上一篇文章通过CSS模拟了自定义下拉列表select样式，这里介绍的CSS实现可折叠树状菜单原理也类似。

原理

利用checkbox的checked值判断是否展开下级菜单。当未点击上级菜单，即checkbox未选中时，ol设置display:none隐藏；当点击上级菜单，checkbox选中，通过:checked伪类让ol展现出来。

效果

效果

代码

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="tree-container">
    <ol>
        <li>
            <div class="node-container">
                <input type="checkbox" id="tree-node1" name="">
                <label for="tree-node1">文件一</label>
                <ol>
                    <li>
                        <div class="node-container">
                            <input type="checkbox" id="tree-node3" name="">
                            <label for="tree-node3">文件3</label>
                            <ol>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                            </ol>
                        </div> 
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ol>
            </div> 
        </li>
    </ol>
</div>

想要增加级数只需要在li中插入node-container类及其子元素: 

1
2
3
4
5
6
7
8
9
<div class="node-container">
    <input type="checkbox" id="tree-node3" name="">
    <label for="tree-node3">文件3</label>
    <ol>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ol>
</div>

兼容性

经测试兼容 IE10 、chrome 和现代移动浏览器。

DEMO

预览地址
代码地址

参考

纯CSS打造可折叠树状菜单 - CSDN
树形菜单（纯CSS）