php栏目的展开与收缩

先看一下实际的效果：

1.初始状态:

2.这里想要展示的效果就是当点击主栏目的时候他们可以把属于自己的子栏目展示出来：

这里是点击中国这个主栏目，然后展示出来属于他的子栏目

然后看一下点击加号的变化效果，在这里我添加了一个span元素<span class="open">+</span>

通过jquery实现，代码如下：

<script>

$('.open').click(function() {

    // 首先需要判断一下目前的状态是出于加号的状态还是减号的状态

    var status = $(this).text();

    if(status == '+') {

     $(this).text('-');

} else {

   $(this).text('-');

}

});

</script>

这个比较容易实现

那么如何实现我们在上面刚刚提到的效果呢，有一个关键的步骤就是需要知道你点击的那个栏目的id,找到属于这个栏目的子id

我给每一行添加了两个属性：id,pid  这样就可以很容易获取你所点击的那一行栏目的id值，具体的实现代码如下：

$('.open').click(function() {
    // 当前的状态是展开还是处于收缩
    var status = $(this).text();

    // 获取所点击的某一行的
    var id = $(this).parent().parent().attr('id');
    if(status == '+') {
        $(this).text('-');
        $('tr[pid='+id+']').show();
    }else {
        $(this).text('+');
        $.ajax({
            type : 'POST',
            url : '{:url("cate/ajaxlst")}',
            dataType : 'json',
            data : {id:id},
            success : function(data) {
                $.each(data,function(k,v) {
                    $('tr[id='+v+']').hide();
                    $('tr[id='+v+']').find('span[class=open]').text('+');
                });
            }
        });
    }
});

当栏目处于收缩的状态的时候，点击该栏目的时候需要查找tr中pid等于你所点击的栏目的id即：$('tr[pid='+id+']').show()

这样展开的功能就实现了，比较麻烦的就是收缩如何实现，在实现收缩的功能的时候遇到点问题，如果还是按照刚刚上面那个展开的方法来实行的话，会出现一个小小的bug,就是如果点击一级栏目属于这个一级栏目的三级栏目是不会收缩的，在这里我使用一个比较麻烦的办法就是使用ajax,将点击的父级栏目的id传到后台进行处理，找到属于这个父级栏目的所有子栏目然后返回进行遍历，代码如下：

这样栏目的收缩就实现了