无限极分类试图的 展缩

标签：style   blog   http   io   ar   color   sp   java   数据   

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

实现的过程：

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

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>

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>

没有实现的功能，收缩前是啥样，展开后依旧是啥样。

无限极分类试图的 展缩

标签：style   blog   http   io   ar   color   sp   java   数据   

原文地址：http://www.cnblogs.com/lxdd/p/4111462.html