简体   繁体   中英

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

I do have a problem using slideToggle(). The following DOM elements won't be pushed down, they just overlap. I tried a lot of versions. I do create the tags with jquery getting a JSON from which I fill in the tag content, so I iterate over the JSON to create the HTML tags for each element :

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');
      });
   });
});

EDIT : screenshot of html output. screenshot html output Thanks in advance!

Use find() instead of children()

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

children() will only search for first level child elements.

I just reset all css styles for my div and finally it worked. I already defined styles for the sidebar and for the ul and li tags. One of the styles was the problem. It kept the elements from toggle down in the sidebar. Thanks for your time!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM