jquery - 如何在 JQuery 中向上滑动(隐藏)子 div？

Question

好吧，假设我有一个在嵌套 div 中构建的导航系统，当我将鼠标悬停在菜单 div 上并隐藏子菜单 div 时，我想显示子菜单 div(以及子子菜单 div)(和子子菜单 div)在鼠标移出时，或者更准确地说，当我将鼠标悬停在不同的菜单 div 上时。

最好的方法是什么？

到目前为止，这就是我所得到的:

<script type="text/javascript">

$('.menu').mouseover(function(){ 
      $(this).children(".submenu").each(function(i){
        $(this).delay(1000).slideDown("slow");

$(this).mouseover(function(i){ 
$(this).children(".sub_submenu").each(function(i){
        $(this).delay(1000).slideDown("slow");

});
});
</script>


<div id="" class="menu">
menu1
<div id="" class="submenu">
submenu11
<div id="" class="sous_sousmenu">
sub_submenu111
</div>
<div id="" class="sub_submenu">
sub_submenu112
</div>
</div>
<div id="" class="submenu">
submenu12
</div>
</div>
<div id="" class="menu">
<a href="#">menu2</a>
<div id="" class="submenu">
sousmenu21
</div>
<div id="" class="submenu">
submenu22
<div id="" class="sub_submenu">
sub_submenu21
</div>
</div>
</div>

现在，当我将鼠标悬停在正确的菜单 div 上时，一切正常(显示子菜单和子子菜单)。现在，当我将鼠标悬停在不同的 .menu div 上时，我应该在哪里/何时/如何告诉脚本对所有 .submenu 和 .sub_submenu 进行向上滑动？

谢谢

Answer 1

尝试这样的事情(demo):

HTML

<div id="" class="menu">
    menu1
    <div id="" class="submenu">
        submenu11
        <div id="" class="submenu">
            sub_submenu111
        </div>
        <div id="" class="submenu">
            sub_submenu112
        </div>
    </div>
    <div id="" class="submenu">
        submenu12
    </div>
</div>
<div id="" class="menu">
    <a href="#">menu2</a>
    <div id="" class="submenu">
        sousmenu21
    </div>
    <div id="" class="submenu">
        submenu22
        <div id="" class="submenu">
            sub_submenu21
        </div>
    </div>
</div>

脚本

$('.menu, .submenu').hover(function(){
    $(this).children('.submenu').stop(true, true).slideDown("slow");
}, function(){
    $(this).children('.submenu').stop(true, true).delay(1000).slideUp("slow");
});