然后是resources/views/manageChild.blade.php：

<ul> @foreach($childsas$child) <li> {{$child->title}} @if(count($child->childs)) @include('manageChild',['childs'=>$child->childs]) @endif </li> @endforeach </ul>

第六步：添加CSS和JS文件

最后一步，我们来添加视图文件所需要的CSS和JS文件。

public/css/treeview.css：

.tree,.treeul{ margin:0; padding:0; list-style:none } .treeul{ margin-left:1em; position:relative } .treeulul{ margin-left:.5em } .treeul:before{ content:""; display:block; width:0; position:absolute; top:0; bottom:0; left:0; border-left:1pxsolid } .treeli{ margin:0; padding:01em; line-height:2em; color:#369; font-weight:700; position:relative } .treeulli:before{ content:""; display:block; width:10px; height:0; border-top:1pxsolid; margin-top:-1px; position:absolute; top:1em; left:0 } .treeulli:last-child:before{ background:#fff; height:auto; top:1em; bottom:0 } .indicator{ margin-right:5px; } .treelia{ text-decoration:none; color:#369; } .treelibutton,.treelibutton:active,.treelibutton:focus{ text-decoration:none; color:#369; border:none; background:transparent; margin:0px0px0px0px; padding:0px0px0px0px; outline:0; }

public/js/treeview.js：

$.fn.extend({ treed:function(o){ varopenedClass='glyphicon-minus-sign'; varclosedClass='glyphicon-plus-sign'; if(typeofo!='undefined'){ if(typeofo.openedClass!='undefined'){ openedClass=o.openedClass; } if(typeofo.closedClass!='undefined'){ closedClass=o.closedClass; } }; /*initializeeachofthetoplevels*/ vartree=$(this); tree.addClass("tree"); tree.find('li').has("ul").each(function(){ varbranch=$(this); branch.prepend(""); branch.addClass('branch'); branch.on('click',function(e){ if(this==e.target){ varicon=$(this).children('i:first'); icon.toggleClass(openedClass+""+closedClass); $(this).children().children().toggle(); } }) branch.children().children().toggle(); }); /*fireeventfromthedynamicallyaddedicon*/ tree.find('.branch.indicator').each(function(){ $(this).on('click',function(){ $(this).closest('li').click(); }); }); /*fireeventtoopenbranchifthelicontainsananchorinsteadoftext*/ tree.find('.branch>a').each(function(){ $(this).on('click',function(e){ $(this).closest('li').click(); e.preventDefault(); }); }); /*fireeventtoopenbranchifthelicontainsabuttoninsteadoftext*/ tree.find('.branch>button').each(function(){ $(this).on('click',function(e){ $(this).closest('li').click(); e.preventDefault(); }); }); } }); /*初始化树状图*/ $('#tree1').treed();

好了，至此所有代码已经编写完成，你可以在浏览器中查看效果了。