首页 > 代码库 > 无限极分类试图的 展缩

无限极分类试图的 展缩

image

image

实现的效果为:点击主类收缩所有的子类,再次点击,逐层次的展开对应的子类

实现的过程:

1,数据库中增加了字段,储存上一层次的id,level_one_id 字段

image

2,html代码中,增加class,利用level_one_id,id的字段信息

<div class="row">            <table class="table table-hover">                <Volist id="vo" name="info">                    <tr class="<?php echo $vo[‘parent_id‘] != 0 ? $vo[‘level_one_id‘] : $vo[‘level_one_id‘];?>" num="{$vo[‘id‘]}">                        <td ban_id="{$vo.id}">                            <?php echo str_repeat(‘  ‘, $vo[‘level‘]);?><span class="toggle-but" style="cursor:pointer;">[+]</span>{$vo.name}<span class="f-right del_ban">[删除]</span>                        </td>                    </tr>                </Volist>            </table>        </div>    </div>

image

3,js代码中进行判断展缩

<script type="text/javascript">        $(‘.toggle-but‘).on(‘click‘,function() {            var _this         = $(this);            var parent         = $(this).parent().parent();            var text         = $(this).text();            var _class         = $(parent).attr(‘class‘);            var num         = $(parent).attr(‘num‘);            var find_class     = _class + ‘-‘ + num;            if(text == ‘[+]‘) {                $(‘tr[class^="‘+find_class+‘"]‘).hide();                $(this).html(‘[-]‘);            } else {                $.each($(‘tr[class^="‘+find_class+‘"]‘),function(i,v) {                    $(‘tr[class^="‘+find_class+‘"]‘).hide();                    $(‘tr[class="‘+find_class+‘"]‘).show();                    $(‘tr[class="‘+find_class+‘"]‘).find(‘.toggle-but‘).html(‘[-]‘);                    _this.html(‘[+]‘);                });            }        });    </script>
没有实现的功能,收缩前是啥样,展开后依旧是啥样。

无限极分类试图的 展缩