Javascript 使用JQuery的可折叠列表 $（文档）.ready（函数（）{ var xml=”\ \ \ \ \ \ \ \ \ \ \ \ "; var data=$.parseXML（xml）；控制台日志（数据）； $（数据）。查找（'method'）。每个（函数（）{ var name=$（this.attr（'name'）； $（“”）.html（“”）.appendTo（“#换页”）； $（this）.children（'childcall'）.each（function（）{ name=$（this.attr（'name'）； $（“”）.html（“”）.appendTo（“#换页”）； }); }); });_Javascript_Jquery_Collapsable

Javascript 使用JQuery的可折叠列表 $（文档）.ready（函数（）{ var xml=”\ \ \ \ \ \ \ \ \ \ \ \ "; var data=$.parseXML（xml）；控制台日志（数据）； $（数据）。查找（'method'）。每个（函数（）{ var name=$（this.attr（'name'）； $（“”）.html（“”）.appendTo（“#换页”）； $（this）.children（'childcall'）.each（function（）{ name=$（this.attr（'name'）； $（“”）.html（“”）.appendTo（“#换页”）； }); }); });

javascript jquery

Javascript 使用JQuery的可折叠列表 $（文档）.ready（函数（）{ var xml=”\ \ \ \ \ \ \ \ \ \ \ \ "; var data=$.parseXML（xml）；控制台日志（数据）； $（数据）。查找（'method'）。每个（函数（）{ var name=$（this.attr（'name'）； $（“”）.html（“”）.appendTo（“#换页”）； $（this）.children（'childcall'）.each（function（）{ name=$（this.attr（'name'）； $（“”）.html（“”）.appendTo（“#换页”）； }); }); });,javascript,jquery,collapsable,Javascript,Jquery,Collapsable,上面的代码遍历xml并将项目打印为-abcde。我想让它成为一个可折叠列表，如给定链接中所示：有没有关于如何使其可折叠的提示编辑：谢谢你的帮助。对不起，我不能接受多个正确答案。所以Shikiryu的解决方案也是正确的。使用JQuery的切换效果，它是这样的： <script> $(document).ready(function(){ var xml = "<root> \ <met

上面的代码遍历xml并将项目打印为-abcde。我想让它成为一个可折叠列表，如给定链接中所示：

有没有关于如何使其可折叠的提示

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

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

    <script>   
     $(document).ready(function(){
           var xml = "<root> \
                <method name='A'> \
                <childcall name='B'></childcall> \
                <childcall name='C'></childcall> \
                </method> \
                <method name='B'> \
                <childcall name='D'></childcall> \
                </method> \
                <method name='C'> \
                <childcall name='D'></childcall> \
                <childcall name='E'></childcall> \
                </method> \
                </root>";

            var data = $.parseXML(xml);
            console.log(data);
            $(data).find('method').each(function(){
                var name = $(this).attr('name');
                $('<div class="items"></div>').html('<a href="'+name+'">'+name+'</a>').appendTo('#page-wrap');
                $(this).children('childcall').each(function(){
                    name = $(this).attr('name');
                    $('<div class="items"></div>').html('<a href="'+name+'">'+name+'</a>').appendTo('#page-wrap');
                });
             });
      });

      </script>
<body>
    <div id="page-wrap"></div>
</body>

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

    <script>   
     $(document).ready(function(){
           var xml = "<root> \
                <method name='A'> \
                <childcall name='B'></childcall> \
                <childcall name='C'></childcall> \
                </method> \
                <method name='B'> \
                <childcall name='D'></childcall> \
                </method> \
                <method name='C'> \
                <childcall name='D'></childcall> \
                <childcall name='E'></childcall> \
                </method> \
                </root>";

            var data = $.parseXML(xml);
            console.log(data);
            $(data).find('method').each(function(){
                var name = $(this).attr('name');
                $('<div class="items"></div>').html('<a href="'+name+'">'+name+'</a>').appendTo('#page-wrap');
                $(this).children('childcall').each(function(){
                    name = $(this).attr('name');
                    $('<div class="items"></div>').html('<a href="'+name+'">'+name+'</a>').appendTo('#page-wrap');
                });
             });
      });

      </script>
<body>
    <div id="page-wrap"></div>
</body>

如果您需要完全按照链接中给出的方式打印

编辑你的js代码，像这样输出html

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

UPDATE1：试试这个JS代码，它会像我在第一点中写的那样打印结果 *注意：代码未优化*

$（文档）.ready（函数（）{ var xml=”\ \ \ \ \ \ \ \ \ \ \ \ "; var data=$.parseXML（xml）；控制台日志（数据）； var htmltxt=“测试”； $（数据）。查找（'method'）。每个（函数（）{ var namenode=$（this.attr（'name'）； var计数=0； $（this）.children（'childcall'）.each（function（）{count++；}）；如果（计数>0）{ htmltxt=htmltxt+“”+namenode+“”； $（this）.children（'childcall'）.each（function（）{ var name=$（this.attr（'name'）； htmltxt=htmltxt+“”+name+“”； }); htmltxt=htmltxt+“”； }否则{ htmltxt=htmltxt+“”+namenode+“”； } }); htmltxt=htmltxt+“”； $（“#换页”）.html（htmltxt）； });
更新2 JSFIDLE

如果您需要完全按照链接中给出的方式打印

编辑你的js代码，像这样输出html

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

UPDATE1：试试这个JS代码，它会像我在第一点中写的那样打印结果 *注意：代码未优化*

$（文档）.ready（函数（）{ var xml=”\ \ \ \ \ \ \ \ \ \ \ \ "; var data=$.parseXML（xml）；控制台日志（数据）； var htmltxt=“测试”； $（数据）。查找（'method'）。每个（函数（）{ var namenode=$（this.attr（'name'）； var计数=0； $（this）.children（'childcall'）.each（function（）{count++；}）；如果（计数>0）{ htmltxt=htmltxt+“”+namenode+“”； $（this）.children（'childcall'）.each（function（）{ var name=$（this.attr（'name'）； htmltxt=htmltxt+“”+name+“”； }); htmltxt=htmltxt+“”； }否则{ htmltxt=htmltxt+“”+namenode+“”； } }); htmltxt=htmltxt+“”； $（“#换页”）.html（htmltxt）； });
更新2 JSFIDLE

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

.category ul{display:none;}

因此：
首先，您需要生成与该示例相同的HTML（使用ul和li而不是div）
最后，您需要应用他们的JS

.category ul{display:none;}

这就给出了：
那么……你链接的文章中的代码有什么问题？在你的情况下不起作用吗？第一个
正常吗？更正了标签。因为我在JQuery中生成html，所以不知道如何将可折叠javascript应用于生成的html。需要一些帮助。那么…你链接的文章中的代码有什么问题？在你的情况下不起作用吗？第一个
正常吗？更正了标签。因为我在JQuery中生成html，所以不知道如何将可折叠javascript应用于生成的html。需要一些帮助。
var count=0$（this）.children（'childcall'）。每个（函数（）{count++；}）；if（count>0）{
this而不是
$（this）.childcall'）。length>0有点过分了。var count=0；$（this.childcall'）。childcall'）。each（function（）{count++；}）；if（count>0）{ this而不是$（this）.children（'childcall'）。length>0有点过分了。 .category ul{display:none;} $('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'); } });