我在使用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 提前致谢!
最佳答案
使用
find()
而不是 children()
$(this).parent().find('ul.tree').slideToggle('slow');
children()
只会搜索第一级子元素。
关于javascript - SlideToggle() 不会将使用 jquery append() 创建的元素向下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33299010/