如何使用纯CSS技术实现一个可折叠树形菜单

html-css021

如何使用纯CSS技术实现一个可折叠树形菜单,第1张

利用伪类可以实现点击打开折叠菜单，但是再次点击收起貌似就没法实现了。跟楼下说的一样，利用:hover、:active 可以设置二级菜单的样式（如height、visibility、display）以达到展开的效果。

温馨提示：不安装less-loader基本上都会报错

严老湿这边呢，就直接使用 Vue-cli 起步了， vue-org-tree 安装成功之后，我们就直接使用了，在 Vue 页面或者组件中使用 vue2-org-tree 标签，动态绑定data

data数据放入页面中

id 每个元素不同的ID ，label为name， children为自己的子集数据

效果图：

刚刚我们看到的是默认排列方式 ，其实还有一种排列方式，我们一起来看看

horizontal  是水平排列方式，我们来实践一下吧，它的参数是 true 、 false

看看效果如何：

使用 label-class-name  我们还可以动态绑定自定义 class

我们一起来尝试一下吧！

js:

css：

     看看效果图

折叠展示效果

折叠效果是有了，那么怎么展开呢？

js:

请看效果图：

问题又来了，默认展开如何实现？

请看大屏幕

在请求完数据之后直接调用,或者生命周期调用，可以自由发挥

第一个参数是你的资源data，第二个参数是全部展开或否

上效果图：

vue2-org-tree 向我们抛出了几个事件，我们先看看有哪些事件

on-node-click 就是被抛出的点击事件

我们在方法里面写一个NodeClick用来接受点击触发的值

打印结果：

它还向我们抛出了移入移出事件，返回值与点击事件大致相同

来了老弟？我们做移入移出，肯定是要有功能的对不对？

每当我们的鼠标移入到小盒子里就出现一个模态框用来展示data内容

js:

css:

上效果图：

propdescriptontypedefaultdata

Object

propsconfigure props

Object

{label: 'label', children: 'children', expand: 'expand'}

labelWidthnode label width

String

|

Number

auto

collapsablechildren node is collapsable

Boolean

true

renderContenthow to render node label

Function

-labelClassNamenode label class

Function

|

String

-selectedKeyThe key of the selected node

String

-selectedClassNameThe className of the selected node

Function

|

String

-

event namedescriptontypeclickClick event

Function

mouseoveronMouseOver event

Function

mouseoutonMouseOut event

Function

鼠标点击时调用它。

params e Event

params data Current node data

well be called when the node-label clicked

params e Event

params data Current node data

当鼠标悬停时调用它。

params e Event

params data Current node data

当鼠标离开时调用它。

params e Event

params data Current node data

最后附上Git地址：https://github.com/CrazyMrYan/vue2-org-tree

预览地址：http://crazy.lovemysoul.vip/gitdemo/vue2-org-tree

关注“悲伤日记”更多精彩文章

1.dhtmlxTree

dHTMLxTree是一个功能丰富的Tree Menu控件。提供丰富的操作API，AJAX支持和drag-n-drop功能。

2. Control.Treeview

采用Mootools开发的树形菜单控件。支持通过Ajax动态获取节点，设置默认选中某些节点。

3. Folder Tree

文件夹树形控件。支持利用拖放（drag and drop）操作来重新排序节点，利用Ajax更新节点。

4. DHTML Tree

这是一个基于标准Html结构构造的Tree控件。

5. dFTree

dFTree是一个javascript css Folder Tree支持利用Ajax技术动态新增/删除/修改节点等功能。