我使用slideToggle()时遇到问题。以下DOM元素不会被按下,它们只是重叠。我尝试了很多版本。我用jquery创建标记,获取一个JSON,我从中填写标记内容,所以我迭代JSON为每个元素创建HTML标记:
var project_infos = '';
jQuery(document).ready(function(){
$.getJSON('project.json', function(data){
project_infos += '<div class=\"row\">'
+ '<div class=\"span3\">'
+ '<div class=\"well\">'
+ '<div>'
+'<ul class=\"nav nav-list sidebar-list\">';
for( var i = 0; i < data.length; i ++ ) {
var project_name = data[i]["item"];
project_infos += '<li>'
+'<label class=\"tree-toggler nav-header\">'
+'<i class=\"fa fa-arrow-right\"></i>' + project_name + '</label>'
+'<ul class=\"nav nav-list tree\">'
+'<li><label class=\"tree-toggler nav-header\">Katalogue</label></li>'
+'<li>'
+'<ul class=\"nav nav-list tree\">'
+'<li><a href="#">Link</a></li>'
+'<li><a href="#">Link</a></li>'
+'<li><a href="#">Link</a></li>'
+'</ul>'
+'</li>'
+'<li><label class=\"tree-toggler nav-header\">History</label></li>'
+'<li><label class=\"tree-toggler nav-header\">Whole project</label></li>'
+'</ul>'
+'</li>';
}
project_infos += '</ul></div></div></div></div>';
$('#tree').append(project_infos);
$('.tree-toggler').click(function () {
$(this).parent().children('ul.tree').slideToggle('slow');
});
});
});
编辑:html输出的截图。 screenshot html output 提前谢谢!
答案 0 :(得分:2)
使用
find()
代替children()
$(this).parent().find('ul.tree').slideToggle('slow');
children()
只会搜索第一级子元素。
答案 1 :(得分:0)
我只重置了我的div的所有CSS样式,最后它起作用了。我已经为侧边栏和ul和li标签定义了样式。其中一种风格是问题。它保持元素在侧栏中切换。 谢谢你的时间!