手写树形折叠结构
参考留念，实用时考虑到有复杂功能比如模糊搜索等，请使用zTree插件
在vue中应用：
html:
<div class="treeBox" v-for="item in this.menuData">
<p class="oneLevel cp treeActive">
<i class="fa fa-chevron-circle-down"></i> <span @click="showSelect(item.parentId, item.name, $event)">{{item.name}}</span>
</p>
<ul class="treeOne pl15">
<li v-for="item in item.children">
<p class="twoLevel cp">
<i class="fa fa-chevron-circle-right"></i> <span @click="showSelect(item.parentId, item.name, $event)">{{item.name}}</span>
</p>
<ul class="treeTwo pl15">
<li v-for="items in item.children">
<i class="fa fa-chevron-circle-right"></i> <span @click="showSelect(items.parentId, items.name, $event)">{{items.name}}</span>
</li>
</ul>
</li>
</ul>
</div>
data:
如果后台返回的数据是扁平化数组数据，需要将扁平化数据转成树形嵌套数组数据（见上文）
js:
threeLevelMenu () {
letoneLevel = jQuery('.treeBox').find('.oneLevel')
lettreeOne = jQuery('.treeBox').find('.treeOne')
lettwoLevel = jQuery('.treeOne').find('.twoLevel')
lettreeTwo = jQuery('.treeOne').find('.treeTwo')
oneLevel.each(function (i) {
jQuery(this).find('i').click(function () {
letoneLevelIcon = jQuery(this)
treeOne.eq(i).slideToggle(function () {
if (jQuery(this).is(':visible')) {
oneLevelIcon.addClass('fa-chevron-circle-down').removeClass('fa-chevron-circle-right')
} else {
oneLevelIcon.addClass('fa-chevron-circle-right').removeClass('fa-chevron-circle-down')
}
})
})
})
twoLevel.each(function (i) {
jQuery(this).find('i').click(function () {
lettwoLevelIcon = jQuery(this)
treeTwo.eq(i).slideToggle(function () {
if (jQuery(this).is(':visible')) {
twoLevelIcon.addClass('fa-chevron-circle-down').removeClass('fa-chevron-circle-right')
} else {
twoLevelIcon.addClass('fa-chevron-circle-right').removeClass('fa-chevron-circle-down')
}
})
})
})
}
css:
.treeBox .treeActive {
background:#ffe100;
color:#424961;
display:inline-block;
border-radius:10px;
padding:0 5px;
}
.oneLevel,.twoLevel {
margin-bottom:5px;
padding:0 5px;
}
.treeTwo {
display:none;
}
.treeOne li{
margin-bottom:5px;
cursor:pointer;
padding:0 5px;
}
