本文讲述在我们网站后台项目开发过程中，采用jQuery+Thinkphp实现在表格里的顶级分类和子分类进行展开与折叠。

jQuery代码

<script type="text/javascript">
    function tree(obj,id){
         var name = $(obj).attr('class');
         if(name == 'fa fa-plus-square')
         {
             $(".parent_id_"+id).show();
             $(obj).attr('class','fa fa-minus-square');
         }else{
             $(obj).attr('class','fa fa-plus-square'); 
$(".parent_id_"+id).hide();         
         } 
    }
  </script>

HTML代码

{volist name="list" id="column" }{if condition="$column['column_p_id'] eq 0"}<tr  class="parent_id_{$column.column_p_id}" data-id="{$column.column_id}" data-level="{$column.lv}">
{else /}<tr  style="display:none;"  class="parent_id_{$column.column_p_id}" data-id="{$column.column_id}" data-level="{$column.lv}">{/if}
                    <td>{$column.column_id}</td>
                    <td><input type="text" class="form-control input-sm" value="{$column.column_sequence}"></td>
                    <td><i class="fa fa-plus-square" onclick="tree(this,1);"></i>{$column['lv']|str_repeat="      ",###}|-{$column.column_name}</td>
                    <td>{$column.column_url}</td>
                    <td>{$column.column_nav==1 ? '是' : '否'}</td>
                    <td>{switch name="column.column_belonged"} {case value="0"}文章{/case} {case value="1"}商品{/case} {case value="2"}案例{/case} {case value="3"}专栏{/case} {default /}default {/switch}</td>
                    <td><a class="btn btn-success btn-xs">预览</a> <a href="/system/column/edit/id/{$column.column_id}" class="btn btn-warning btn-xs">编辑</a> <a href="javascript:void(0);" data-id="{$column.column_id}" class="btn btn-danger btn-xs del">删除</a></td>
                  </tr>
  {/volist}