实现目标：无限级列表，点击+号时，下一级项目全部显示，点击-号时，所有下级项目全部隐藏，同时调整+-的变化。
前台代码
<body>
<table class="table">
<tr pid="0">
<td align="center" width="5%">展开</td>
<td align="center" width="5%">ID</td>
<td align="center">问题分类</td>
<td align="center" width="25%">操作</td>
</tr>
<volist name="list" id="vo">
<tr id="{$vo.id}" pid="{$vo.pid}">
<td align="center" width="5%" id="bj"><span class="open" >+</span></td>
<td align="center" width="5%">{$vo.id}</td>
<td align="left" width="50">{:str_repeat('  ',$vo['level'])}<?php if($vo['level']>0){echo '|';}?>{$vo.html}{$vo.name}</td>
<td align="center" width="25%">
<a class="bt2" href="{:U(addChild,array('id'=>$vo['id']))}">添加子分类</a>
<a class="bt2" href="{:U(modifyList,array('id'=>$vo['id']))}">修改</a>
<a class="bt1" href="{:U(deleteCate,array('id'=>$vo['id']))}">删除</a>
</td>
</tr>
</volist>
</table>
</body>
JS代码
$(function(){
$( 'tr[pid!=0]' ).hide();
$( '.open' ).toggle( function(){
var st =$(this).parents('tr').attr('id');
$(this).html('-');
alert('open');
cyclic_show(st);
},function(){
$(this).html('+');
var st =$(this).parents('tr').attr('id');
alert('close');
cyclic_hide(st);
$()
})
})
function cyclic_show(st){
//遍历所有的TR标签，打开选中行下一级子项目
$('tr').each(function(){
if($(this).attr('pid')==st){
$(this).show();
}
})
}
function cyclic_hide(st){
//遍历所有的TR标签,关闭选中行的所有子项目
$('tr').each(function(){
if($(this).attr('pid')==st){
$(this).hide();
$(this).find('#bj>span').html('+');
var rec = $(this).attr('id');
cyclic_hide(rec);
}
})
}
综上过程：发现存在这样一个问题，当第一遍逐级打开子项目没有问题，当打开部分子项目后，又点击上级项目隐藏，再打开，
此时点击第一次打开的子项目，发现第一次点击时，调用的方法不对。
原因分析：是由于在点击上级项目隐藏，再打开过程中，已打开的子菜单虽然标识变子，但它的toggle属性已点击过一次，才会
出现这种情况。
解决思路：不使用toggle方法，使用click方法，配合IF判断实现，代码如下：
$(function(){
$( 'tr[pid!=0]' ).hide();
$( '.open' ).click( function() {
if ($(this).html() == '+') {
var st = $(this).parents('tr').attr('id');
$(this).html('-');
cyclic_show(st);
}else {
var st = $(this).parents('tr').attr('id');
$(this).html('+');
cyclic_hide(st);
}
})
})
分享一个知识点：
最近编写一个实例的时候使用到toggle函数，但是调用的时候会把元素隐藏掉，之前使用过也只是多个事件轮流切换罢了。百思不得其解于是就在网上搜索查看jQuery API文档。终于发现了原因：
原来在jQuery 1.9版本之后，toggle()发生了变化，以下是官网的Notes:
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation methodnamed .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of argumentspassed.
在早期的版本，存在两个同名的toggle()，但是所执行的方法却是不一样的：
.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )
Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.
=====================================================
.toggle( [duration ] [, complete ] )
Description: Display or hide the matched elements.
而之后的版本把第一个toggle()函数给去掉了，导致用于调用切换功能时会把元素隐藏了。
========================
既然去掉了这个函数，但是实现需求还是要的。怎么来实现多个事件的轮流切换了？
可以通过click事件判断不同的情况来触发，或者通过设置一个变量计数点击次数来执行不同的函数。
既然去掉了这个函数，但是实现需求还是要的。怎么来实现多个事件的轮流切换了？
可以通过click事件判断不同的情况来触发，或者通过设置一个变量计数点击次数来执行不同的函数。
既然去掉了这个函数，但是实现需求还是要的。怎么来实现多个事件的轮流切换了？
可以通过click事件判断不同的情况来触发，或者通过设置一个变量计数点击次数来执行不同的函数。
既然去掉了这个函数，但是实现需求还是要的。怎么来实现多个事件的轮流切换了？
可以通过click事件判断不同的情况来触发，或者通过设置一个变量计数点击次数来执行不同的函数。
既然去掉了这个函数，但是实现需求还是要的。怎么来实现多个事件的轮流切换了？
可以通过click事件判断不同的情况来触发，或者通过设置一个变量计数点击次数来执行不同的函数。