使用 JQuery 的可折叠列表答案

【问题标题】：Collapsible list using JQuery使用 JQuery 的可折叠列表
【发布时间】：2013-04-10 09:34:13
【问题描述】：

    <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>

上面的代码遍历 xml 并将项目打印为 - A B C B D C D E。我想让它成为一个可折叠的列表，就像在给定的链接中一样：http://www.sendesignz.com/index.php/jquery/77-how-to-create-expand-and-collapse-list-item-using-jquery

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

编辑：感谢您的帮助。抱歉，我不能接受一个以上的正确答案。所以 Shikiryu 的解决方案也是正确的。

【问题讨论】：

那么...您链接的文章中的代码有什么问题？在你的情况下它不起作用吗？
第一个</script>正常吗？
更正了

标签： javascript jquery collapsable

【解决方案1】：

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

$(data).find('method').each(function(){
    var hasChild = $(this).children('childcall').length > 0;
    curLi += '<li';
    curLi += ((hasChild) ? ' class="category plusimageapply">': '>');
    curLi += $(this).attr('name');
    if(hasChild){
        curLi += '<ul>';
         $(this).children('childcall').each(function(){
             var name = $(this).attr('name');
             curLi += '<li><a href="'+name+'">'+name+'</a></li>';
         });
        curLi += '</ul>';
    }
    curLi += '</li>';
 });
$('#test').append(curLi);

注意是可以优化的。

那么，你需要指出一些CSS（隐藏children，添加+和-等）

.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/

【讨论】：

【解决方案2】：

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

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

 <ul>
     <li class="category">Menu 1
         <ul>
             <li>Menu 1 sub 1</li>
             <li>Menu 2 sub 2</li>
         </ul>
     </li>
     <li>Menu 2</li>
 </ul>

我们提供的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 = "<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);

        var htmltxt="test<ul>";
        $(data).find('method').each(function(){
            var namenode = $(this).attr('name');
            var count = 0;
            $(this).children('childcall').each(function(){ count++; });
            if(count>0){
                htmltxt = htmltxt + "<li='category'>" + namenode +"<ul>";
                $(this).children('childcall').each(function(){ 
                        var name = $(this).attr('name');
                        htmltxt = htmltxt + "<li>" + name + "</li>";    
                });
                htmltxt = htmltxt + "</ul></li>";
            }else{
                htmltxt = htmltxt +"<li>"+namenode+"</li>";
            }
         });
        htmltxt = htmltxt + "</ul>";
        $("#page-wrap").html(htmltxt);
  });

更新 2 JSFiddle

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

【讨论】：

var count = 0; $(this).children('childcall').each(function(){ count++; }); if(count>0){ this 而不是 $(this).children('childcall').length >0 有点矫枉过正。

【解决方案3】：

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

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

【讨论】：