jQuery技术:使用JQuery的可折叠列表

如果您需要完全像链接中给出的打印

UPDATE1：尝试这个JS代码，它将打印结果，因为我在第一点写的 * 注意：代码没有优化*

  $(document).ready(function(){ var xml = "                        "; var data = $.parseXML(xml); console.log(data); var htmltxt="test
"; $(data).find('method').each(function(){ var namenode = $(this).attr('name'); var count = 0; $(this).children('childcall').each(function(){ count++; }); if(count>0){ htmltxt = htmltxt + "" + namenode +"
"; $(this).children('childcall').each(function(){ var name = $(this).attr('name'); htmltxt = htmltxt + "
" + name + "
"; }); htmltxt = htmltxt + "
"; }else{ htmltxt = htmltxt +"
"+namenode+"
"; } }); htmltxt = htmltxt + ""; $("#page-wrap").html(htmltxt); }); 

更新2 JSFiddle

首先 ，您需要生成与该示例相同的HTML（使用ul和li而不是div）

 $(data).find('method').each(function(){ var hasChild = $(this).children('childcall').length > 0; curLi += '': '>'); curLi += $(this).attr('name'); if(hasChild){ curLi += '
'; $(this).children('childcall').each(function(){ var name = $(this).attr('name'); curLi += '
https://stackoverflow.com/questions/15922108/collapsible-list-using-jquery/'+name+'
'; }); curLi += '
'; } curLi += ''; }); $('#test').append(curLi); 

请注意，它可以进行优化。

然后 ，你需要指出一些CSS（隐藏孩子，添加+和 – 等）

 .category ul{display:none;} 

最后 ，您需要应用他们的JS

 $('li.category').click(function(event){ if($(this).is('.plusimageapply')) { $(this).children().show(); $(this).removeClass('plusimageapply'); $(this).addClass('minusimageapply'); } else { $(this).children().hide(); $(this).removeClass('minusimageapply'); $(this).addClass('plusimageapply'); } }); 

这给了： http ： //jsfiddle.net/dujRe/1/

使用JQuery的切换效果，它是这样的：

 $("#CollapseTrigger").click(function () { $("#ListToBeHidden").toggle("slow"); });