[jQuery] Traversing nested lists and selecting descendants

[Jonas Hallgren]

Hi,

I'm a stumbling beginner at jQuery and despite my best efforts at
serching for an answer I just can't seem to find a solution that is
clear to me. So here goes:

I am trying to build a file-explorer using nested UL:s. The folders
are all closed by default and when clicking they are meant to expand.

So I try this:

$(document).ready(function() {
    $(".folderroot .folder").click(function(e) {
          var $subs = $(e.target).children();
          $($subs).slidetoggle();
    });
});


And this seemed to work at first, but when I started using more levels
in my nesting the subfolders seems to get one event for each level in
my folder structure, opening and instantly closing etc..

So I need to target the first level descendant, and here I cannot find
the correct syntax

What I want to do:

$(document).ready(function() {
    $(".folderroot .folder").click(function(e) {
          var $subs = $(e.target);
          $($subs + "> ul").slidetoggle();
    });
});

but this of course doesn't work.

Can anybody help me out here, any help would be greatly appreciated!