Как слайдить (скрывать) дочерние элементы в JQuery?

Question

Хорошо, допустим, у меня есть навигационная система, построенная на вложенных элементах 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>

Прямо сейчас, все работает (показывает подменю и подменю), когда я наведу курсор мыши на нужный раздел меню.Теперь, где / когда / как я должен сказать скрипту, чтобы он выполнял слайд-ап всех .submenu и .sub_submenu, когда я делаю указатель мыши на другом .menu div?

Спасибо

Answer 1

Попробуйте что-то вроде этого ( демо ):

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>

Script

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