實現目標：無限級列表，點擊+號時，下一級項目全部顯示，點擊-號時，所有下級項目全部隱藏，同時調整+-的變化。
前台代碼
<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事件判斷不同的情況來觸發，或者通過設置一個變量計數點擊次數來執行不同的函數。