使用JQuery的可折叠列表

 $(document).ready(function(){ var xml = " \  \  \  \  \  \  \  \  \  \  \  \ "; var data = $.parseXML(xml); console.log(data); $(data).find('method').each(function(){ var name = $(this).attr('name'); $('
').html(''+name+'').appendTo('#page-wrap'); $(this).children('childcall').each(function(){ name = $(this).attr('name'); $('
').html(''+name+'').appendTo('#page-wrap'); }); }); });   
  

上面的代码遍历xml并打印项目为 – ABCBDCD E.我想把它变成一个可折叠的列表，就像在给定的链接中一样： http ： //www.sendesignz.com/index.php/jquery/77-how-to -create-扩大和崩溃，列表项，使用，jquery的

有关如何使其可折叠的任何提示？

编辑：谢谢你的帮助。 对不起，我不能接受多个答案是正确的。 所以Shikiryu解决方案也是正确的。

Answer 1

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

1. 编辑你的js代码输出像这样的HTML

     
    
   Menu 1 
    
   Menu 1 sub 1
    
   Menu 2 sub 2
    
    
    
   Menu 2
     

2. 我们提供的JS代码

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

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

http://jsfiddle.net/faraqsa/CKa6V/

Answer 2

首先 ，您需要生成与该示例相同的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/

Answer 3

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

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