slideToggle() 不会将使用 jquery append() 创建的元素向下推

Question

我在使用 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 提前致谢！

Answer 1

使用 find() 而不是 children()

$(this).parent().find('ul.tree').slideToggle('slow');

children() 只会搜索一级子元素。

Answer 2

我刚刚为我的 div 重置了所有 css 样式，终于成功了。我已经为侧边栏以及 ul 和 li 标签定义了样式。其中一种风格是问题所在。它使元素不会在侧边栏中向下切换。谢谢你的时间！

slideToggle() 不会将使用 jquery append() 创建的元素向下推

slideToggle() doesn't push elements created with jquery append() down

html

javascript

jquery

json

slidetoggle