Question

我试试这段代码： -

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script>
function load() {
    var select = $('#mySelect');
    var xml = ['<child_2 entity_id="2" value="Root" parent_id="1">', 
               '<child_4 entity_id="4" value="Activities" parent_id="2">', 
               '<child_10066 entity_id="10066" value="Physical1" parent_id="4">', 
               '<child_10067 entity_id="10067" value="Cricket" parent_id="10066">', 
               '<child_10068 entity_id="10068" value="One Day" parent_id="10067"/>', 
               '</child_10067>', '</child_10066>', '<child_10069 entity_id="10069" value="Test2" parent_id="4"/>', 
               '<child_10070 entity_id="10070" value="Test3" parent_id="4"/>', 
               '<child_10071 entity_id="10071" value="Test4" parent_id="4"/>', 
               '<child_10072 entity_id="10072" value="Test5" parent_id="4"/>', 
               '<child_5 entity_id="5" value="Physical" parent_id="4"/>', '</child_4>', '</child_2>'].join('');

    function makeHtml($xml, $ul) {
        $(document).ready(function () {
            $(xml).find('child_10066').each(function () {
                var $node = $(this);
                var $li = $('<li></li>').html($node.attr('value'));
                $ul.append($li);
                if ($node.children().length > 0) {
                    $childUl = $('<ul></ul>').hide();
                    $ul.append($childUl);
                    // toggle hide and show
                    $li.click(function () {
                        if ($(this).next().css('display') == 'none') {
                            $(this).next().show();
                        } else {
                            $(this).next().hide();
                        }
                    });
                    makeHtml($node.children(), $childUl);
                }
            });
        });
    }
    makeHtml($(xml), $('ul'));
}
</script>
<body onload="load()">
<div id="mySelect"></div>
<ul></ul>
</body>

我想输出： - （在文件加载时）

Physical1
Test2
Test3
Test4
Test5
Physical

如果点击physical1，则显示子节点，如： -

Physical1
Cricket
Test2
test3
test4
test5
Physical

如果点击cricket
Physical1
Cricket
One Day
Test2
Test3
Test4
Test5
Physical

使用我的代码： - 我得到Physical1
但点击它们后，它会返回一个新的ul li，其值为Physical1
感谢...

Answer 1

试试这种方式！

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

var select = $('#mySelect');
var xml = ['<child_2 entity_id="2" value="Root" parent_id="1">',
'<child_4 entity_id="4" value="Activities" parent_id="2">',
    '<child_10066 entity_id="10066" value="Physical1" parent_id="4">',
        '<child_10067 entity_id="10067" value="Cricket" parent_id="10066">',
            '<child_10068 entity_id="10068" value="One Day" parent_id="10067"/>',
        '</child_10067>',
    '</child_10066>',
    '<child_10069 entity_id="10069" value="Test2" parent_id="4"/>',
    '<child_10070 entity_id="10070" value="Test3" parent_id="4"/>',
    '<child_10071 entity_id="10071" value="Test4" parent_id="4"/>',
    '<child_10072 entity_id="10072" value="Test5" parent_id="4"/>',
    '<child_5 entity_id="5" value="Physical" parent_id="4"/>',
'</child_4>',
'</child_2>'
].join('');

     function makeHTML(parent, ul) {

         $(xml).find(parent).children().each(function() {

                var $node =  $(this) ;

                var $li   = $('<li/>');
                var $span = $('<span/>');
                $span.text($node.attr('value'));

                $li.append( $span ); 
                ul.append( $li ); 

                if ( $node.children().length > 0 ) {

                     // toggle hide and show
                    $li.click( function(){

                            event.stopImmediatePropagation();

                            var _UL = $(this).children()[1];                

                            if ( $(_UL).css('display') == 'none') {
                                $(_UL).show();
                            } else {
                                $(_UL).hide();
                            }  
                     });

                     var _newUl = $('<ul/>');
                     $(_newUl).hide();
                     $li.append(_newUl);
                     makeHTML($node.attr('tagName'), $(_newUl));

                } 
        });
    }         

    makeHTML('child_4', $('#_ul'));
});  
</script>
<body>
<div id="mySelect"></div>
<ul id="_ul"></ul>
</body>

如何加载兄弟和那里的子属性值

1 个答案: