使用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 D E。我想让它成为一个可折叠的列表,就像在给定的链接:http://www.sendesignz.com/index.php/jquery/77-how-to-create-expand-and-collapse-list-item-using-jquery
关于如何使它可折叠有任何提示吗?
编辑:谢谢你的帮助。抱歉,我不能接受多于一个的正确答案。所以石基宇的解决方法也是正确的。首先,您需要生成与示例相同的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(隐藏子,添加+和-等)
.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/
如果您需要完全按照链接
中给出的方式打印编辑你的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代码,它将打印结果,因为我写在点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的切换效果,效果如下:
$("#CollapseTrigger").click(function () {
$("#ListToBeHidden").toggle("slow");
});
相关文章:
- 默认情况下折叠和展开嵌套列表
- 使用下拉列表引导不可折叠的导航栏
- jQuery与可折叠列表冲突
- 阻止javascript关闭打开的折叠列表
- 可折叠/不可折叠的列表视图类似于Word大纲视图
- 更高效的可折叠列表定位
- 使用 JavaScript 在 HTML 中展开/折叠列表
- 如何在Spring MVC中实现无序列表的展开/折叠功能
- 纯 js 中的可折叠列表优化
- 使有序列表可折叠
- 使用jQuery可折叠列表 - 如何更新展开/折叠全部按钮
- BootstrapJS - 导航导航列表在单击时不会折叠
- 如何使此展开/折叠常见问题解答列表正常工作
- 将特殊字符折叠添加到列表筛选器
- 在html 4中使用CSS或javascript折叠和扩展列表的最佳方式是什么
- 为什么展开和折叠不起作用,在Accordion列表中搜索文本后
- 可折叠onclick事件中的Jquery Mobile列表没有'动态添加时无法工作
- 展开/折叠对象列表
- 启动列表组菜单在单击时展开,但不会折叠
- 具有无序列表控件的定义列表折叠面板