Simple interactive html lists with jQuery

My programming knowledge is very limited so I would really appreciate any 开发者_开发技巧help on this. Lets say I have an ordered nested .html list like this:

1. A
2. B
   1. D
   2. E
      1. F
      2. G
3. C

Now I already have a script to make these items appear sequentially by using the up/down keyboard arrows:

var curIndex = 0;
$(window).keydown(function(e) {
    if(e.keyCode === 38) {
        if(curIndex > 0) curIndex--;
        $("li").eq(curIndex).hide();
    }
    else if(e.keyCode === 40) {
        $("li").eq(curIndex).show();
        if(curIndex < 3) curIndex++; 
    }
});

What I would like to achieve is to have the same functionality, but only for a specific nested level. So at the beginning it would open "A-B-C". Then if you activate the "B" level for example by a mouseclick it would work for "D-E". If you click on the "E" for "F-G".

I would really appreciate your help!

You are using $('li'), which grabs all the LI tags in the document.

You could use $('#ul_id li') to grab just the LI tags inside a specific list <ul id="ul_id">.

Or use $('li').not(':hidden') to get a list of only visible LI tags.