public function buildList($parent_id = 0,$level = 1) {

$list = [];

foreach ( $this->data as $key => $val ) {

if ( $val['parent_id'] == $parent_id ) {

$v['id'] = $val['id'];

$v['parent_id'] = $val['parent_id'];

$v['name'] = $val['name'];

$v['module'] = $val['module'];

$v['filename'] = $val['filename'];

$v['icon'] = $val['icon'];

$v['is_show'] = $val['is_show'];

$v['sort'] = $val['sort'];

$v['level'] = $level;

$children = $this->buildList($v['id'],$level + 1);

if(empty($children)) {

$v['has_children'] = false;

} else {

$v['has_children'] = true;

}

$list[] = $v;

$list = array_merge($list,$children);

}

}

return $list;

}

css： 

.taxons-list {

border-right: 1px solid #f3f3f3;

border-bottom: 1px solid #f3f3f3;

}

.taxons-list li {

height: 45px;

line-height: 45px;

border-left: 1px solid #f3f3f3;

border-top: 1px solid #f3f3f3;

}

.taxons-list li a {

font-size: 14px;

}

.taxons-list .taxon-no {

width: 5%;

}

.taxons-list .taxon-name {

width: 50%;

}

.taxons-list .taxon-name img {

vertical-align: middle;

cursor: pointer;

}

.taxons-list .taxon-name .line-verticle {

display: block;

width: 15px;

height: 40px;

position: relative;

float: left;

}

.taxons-list .taxon-name .line-verticle:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 1px;

height: 25px;

background: #dddddd;

}

.taxons-list .taxon-name .line-verticle:after {

content: '';

position: absolute;

top: 25px;

left: 0;

width: 15px;

height: 1px;

background: #dddddd;

}

.taxons-list .taxon-name .line-more {

width: 30px;

}

.taxons-list .taxon-name .line-more:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 1px;

height: 25px;

background: #dddddd;

}

.taxons-list .taxon-name .line-more:after {

content: '';

position: absolute;

top: 25px;

left: 0;

width: 30px;

height: 1px;

background: #dddddd;

}

.taxons-list .taxon-module {

width: 10%;

}

.taxons-list .taxon-show {

width: 10%;

}

.taxons-list .taxon-sort {

width: 10%;

}

.taxons-list .taxon-operate {

width: 10%;

}

.taxons-list .pull-left {

border-right: 1px solid #d9d9d9;

padding-left: 5px;

}

.taxons-list .taxon-header {

background: #f3f3f3;

}

.taxons-list .taxon-hide {

display: none;

}

html：

• 名称

  显示

{volist name="list" id="vo"}

{if condition="$vo['level'] eq 1"}

• {else /}

• {/if}

  {if condition="$vo['has_children'] eq true"}

  

  {else /}

  

  {/if}

  {if condition="$vo['level'] eq 2"}

  {elseif condition="$vo['level'] eq 3"}

  {/if}

  {$vo.name}

{/volist}

js:

$(".taxons-list li").each(function() {

$(this).click(function() {

// 只考虑3级

var id = $(this).attr('data-id');

var next_node = $('.parent_'+id);

var icon = $(this).find('.taxon-name img');

if (next_node.hasClass('taxon-hide')) {

icon.attr('src','no_children.gif');

next_node.removeClass('taxon-hide');

} else {

if (next_node.length != 0) {

icon.attr('src','has_children.gif');

}

next_node.addClass('taxon-hide');

// 如果还有第三级

var next_id = next_node.attr('data-id');

var next_next_node = $('.parent_'+next_id);

if(next_next_node.length != 0) {

next_node.find('.taxon-name img').attr('src','has_children.gif');

next_next_node.addClass('taxon-hide');

}

}

})

})

效果：