我试图启动下一个

Question

这里之前完成的动画的每一个循环的一个样本。我的问题是，如果你点击其中一个菜单项目（现在只有最左边的一个会做任何事情），那么子菜单项目列表就会下滑。我想要做的是将一张幻灯片放下，然后再下一张幻灯片（一旦第一次完成动画制作），等等。截至目前，他们作为一个对象滑落。此外，作为一个侧面问题，是否有更好的方式导航到'.menuItem'部分，而不是去父母 - >子女 - >孩子？

编辑::

更新了JS与我涉及递归的最新尝试，但现在没有任何反应。这里是新的脚本：

$('.menu') 
    .click(function() { 
      var menu = $(this).parent().children('.menuItem').children(); 
      openMenu(menu); } 
    ); 

function openMenu (menu) { 
    if (menu.length > 0) { 
     var subMenu = menu.shift(); 
     $(subMenu) 
      .css({ top:$(this).position().top, left:$(this).position().left }) 
      .slideDown('normal', function() { 
       openMenu(menu); } 
      ); 
    } 
} 

::编辑完

下面是相关的源：

$('.menu') 
    .hover( 
     function(event) { $(this).toggleClass('highlighted'); } 
    ) 
    .click(
     function(event) { $(this).parent().children('.menuItem').children().each( 
      function() { 
       $(this) 
        .css({ top:$(this).position().top, left:$(this).position().left}) 
        .slideDown(); 
      }); 
     } 
    ); 

---

<div class='box'> 
    <div> 
     <div class='menu'>Resources</div> 
     <div class='menuItem'> 
      <div>Library</div> 
      <div>Internet</div> 
      <div>Your mom</div> 
     </div> 
    </div> 
</div> 

Answer 1

我最终使用递归：

$('.menu') 
    .mouseover(function() { 
     var subMenu = []; 

     $(this).next().children().each(function() { 
      subMenu.push($(this)); 
     }); 

     pullDownMenu(subMenu); 
    }) 
    .mouseout(function() { 
     $(this).next().children().each(function() { $(this).stop(true, true); }); 
    }); 

function pullDownMenu(subMenu) { 
    var menu = $.makeArray(subMenu); 
    if (menu.length == 0) 
     return; 
    else { 
     var menuItem = menu.shift(); 
     $(menuItem).slideDown(100, function() { pullDownMenu(menu); }); 
    } 
} 

Answer 2

$('.menu').click(function() { 
    $(this).parent().find('.menuItem div').each(function(i) { 
     $(this).delay(i*1000).fadeIn(); 
    } 
});