使用JQuery的可折叠列表 [英] Collapsible list using 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>
上面的代码遍历xml并将项目打印为-A B C B D C DE. 我想将其设为可折叠列表，如给定链接:
The above code traverses the xml and prints items as - A B C B D C D E. I want to make this a collapsible list, like in the given link: http://www.sendesignz.com/index.php/jquery/77-how-to-create-expand-and-collapse-list-item-using-jquery
关于如何使其可折叠的任何提示吗?
Any hint on how to make it collapsible?
感谢您的帮助.抱歉，我不能接受多个答案.因此Shikiryu解决方案也是正确的.
Thanks for help. Sorry I cannot accept more than one answer as correct. So Shikiryu solution is also correct.
推荐答案
如果您需要完全按照链接中的要求进行打印
If you need to print exactly like given in the link
-
编辑您的js代码以像这样放出html
edit your js code to out put html like this
<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代码
Us the provided JS code
$('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代码，它将打印出我在第1点中所写的结果 * 注意:代码未优化*
$(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);
});
UPDATE 2 JSFiddle
http://jsfiddle.net/faraqsa/CKa6V/
这篇关于使用JQuery的可折叠列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
