我正在尝试这段代码:-
<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
谢谢......