多级列表和折叠

620 阅读1分钟

5.2355618.gif
大萌神镇楼

我是超级无敌杀人王啊啊啊!!!

没看过我上一篇的先看看,这里的东西会强依赖那篇文章里的树状结构迭代器。
juejin.cn/post/708557…

本文此处使用的dom框架是一个叫CtrlLib的框架,但是你如果用别的框架的话可能得先转换成数组。

dom结构:

image.png group_iterator就是那个迭代器。里面两个i标签别管它,那是我用来做操作的图标。

就是简单地遍历之后渲染,使用深度计算得左侧偏移和颜色类名,可以清晰地区分层级。
image.png

那我是这么让它进行折叠的呢? 代码上面,有这个东西。这是CtrlLib的控制css的地方。

        <ctrlstyle>
            ${this.folded_CSS_Select}{
                display:none;
            }
        </ctrlstyle>

然后控制这个值作出区间选择的样子就行了。

image.png 这个folded_data是一个存储折叠记录的Map。所以这里面用的是for of遍历。

成果:
动画86.gif