How to hide (hide) child divs in jQuery?

Question

Well, let's say I have a navigation system built in nested divs and I want to show submenus of divs (and sub-sub-menu divs) when I hover over a menu div and hide the submenu of divs (and sub-sub-menu divs ) on the mouse, or, more precisely, when you mouse over another div menu.

What would be the best way?

So far, here's what I got:

<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> 

At the moment, everything works (a submenu and a submenu are displayed) when I hover over the corresponding div menu. Now, where / when / how should I tell the script to make a slide piece of all .submenu and .sub_submenu when I mouse over another .menu div?

thanks

Answer 1

Try something like this ( 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> 

Script

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