首页 > 代码库 > 无限极分类试图的 展缩
无限极分类试图的 展缩
实现的效果为:点击主类收缩所有的子类,再次点击,逐层次的展开对应的子类
实现的过程:
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>
没有实现的功能,收缩前是啥样,展开后依旧是啥样。
无限极分类试图的 展缩
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。