效果来源

X-admin:http://x.xuebingsi.com/
是一款依赖于 layui 的一款网站后台模板

素材

  1. layui:主要用layui中的字体图标

    源码

    STYLE

  1. <link rel="stylesheet" href="/layui/css/font.css">
  2. <style>
  3.     .x-show {
  4.         cursor: pointer;
  5.     }
  7.     .layui-icon {
  8.         font-family: layui-icon!important;
  9.         font-size: 16px;
  10.         font-style: normal;
  11.         -webkit-font-smoothing: antialiased;
  12.         -moz-osx-font-smoothing: grayscale;
  13.     }
  14. </style>

HTML

{volist name="list" id="vo"}
<tr  cate-id='{$vo.id}' fid='0'>
    <td><div class="ckbox ckbox-primary"><input type="checkbox" id="checkbox{$vo.id}" name="checkid[]" value="{$vo.id}" /><label for="checkbox{$vo.id}">{$vo.id}</label></div></td>
    <td>{notempty name="vo.child"}
        <i class="layui-icon x-show" status='true'>&#xe623;</i>
        {/notempty}
        {$vo.title}</td>
    <td>{$vo.sort||renew_field=$vo.id,'sort'}</td>
    <td>{$vo.status|show_status=$vo.id}</td>
    <td>{$vo.create_time}</td>
    <td>{$vo.update_time}</td>
    <td class="text-right">
        {$vo.id|show_operate='update','编 辑'}
        {$vo.id|show_operate='delete','删 除'}
    </td>
</tr>
{foreach $vo.child as $cvo}
<tr  cate-id='{$cvo.id}' fid='{$vo.id}'>
    <td><div class="ckbox ckbox-primary"><input type="checkbox" id="checkbox{$cvo.id}" name="checkid[]" value="{$cvo.id}" /><label for="checkbox{$cvo.id}">{$cvo.id}</label></div></td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;|- {$cvo.title}</td>
    <td>{$cvo.sort||renew_field=$vo.id,'sort'}</td>
    <td>{$cvo.status|show_status=$cvo.id}</td>
    <td>{$cvo.create_time}</td>
    <td>{$cvo.update_time}</td>
    <td class="text-right">
        {$cvo.id|show_operate='update','编 辑'}
        {$cvo.id|show_operate='delete','删 除'}
    </td>
</tr>
{/foreach}
{/volist}

</tbody>

JS

<script src="__PLUGIN__/layui/layui.js"></script>
<script>
    $("tbody.x-cate tr[fid!='0']").hide();
    // 栏目多级显示效果
    var cateIds = [];
    function getCateId(cateId) {

        $("tbody tr[fid="+cateId+"]").each(function(index, el) {
            id = $(el).attr('cate-id');
            cateIds.push(id);
            getCateId(id);
        });
    }
    $('.x-show').click(function () {
        if($(this).attr('status')=='true'){
            $(this).html('&#xe625;');
            $(this).attr('status','false');
            cateId = $(this).parents('tr').attr('cate-id');
            $("tbody tr[fid="+cateId+"]").show();
        }else{
            cateIds = [];
            $(this).html('&#xe623;');
            $(this).attr('status','true');
            cateId = $(this).parents('tr').attr('cate-id');
            getCateId(cateId);
            for (var i in cateIds) {
                $("tbody tr[cate-id="+cateIds[i]+"]").hide().find('.x-show').html('&#xe623;').attr('status','true');
            }
        }
    })
</script>