2010-04-13 6 views
1

J'ai un menu déroulant avec Jquery.Jquery - Faire glisser tous les autres menus

À l'heure actuelle, si vous passez la souris sur tous les éléments de menu, leurs sous-menus s'afficheront tous en même temps.

Je voudrais que si je survole un menu, puis passer à la suivante, que le sous-menu du menu précédent remonte. Comme c'est maintenant, je dois planer hors des sous-menus pour qu'ils glissent vers le haut.

Pour simplifier, lorsque vous passez la souris sur un menu parent, faites glisser tous les autres sous-menus du menu parent s'ils sont ouverts.

$("#DropDownMenu li.parent").hover(function() { 
     $(this).find(".subMenu").slideDown('fast').show(); 

     $(this).parent().find(".subMenu").hover(function() { 
     }, function() { 
      $(this).parent().find(".subMenu").slideUp('slow'); 
     }); 
    });  

Le balisage est fondamentalement comme ça,

<ul id="DropDownMenu"> 
<li class="parent"><a>Link1</a> 
     <ul class="subMenu"> 
       <li><a>SubLink1</a></li> 
       <li><a>SubLink2</a></li> 
     <li><a>SubLink3</a></li> 
     <li><a>SubLink4</a></li> 
     </ul> 
    </li> 
<li class="parent"><a>Link2</a> 
     <ul class="subMenu"> 
       <li><a>SubLink1</a></li> 
       <li><a>SubLink2</a></li> 
     <li><a>SubLink3</a></li> 
     <li><a>SubLink4</a></li> 
     </ul> 
    </li> 

Répondre

0

J'ai réussi à le comprendre! En utilisant .siblings() je peux glisser tous les sous-menus de l'autre parent.

$("#DropDownMenu li.parent").hover(
     function() { 
      $(this).find(".subMenu").slideDown('fast'); 
      $(this).siblings().find(".subMenu").slideUp('slow'); 

      $(this).parent().find(".subMenu").hover(function() { 
      }, function() { 
       $(this).parent().find(".subMenu").slideUp('slow'); 
      }); 
     }); 
+0

@Jova - qui peut être raccourci, voir ma réponse s'il vous plaît. – karim79

+0

@ karim79 - J'ai vu votre réponse mais elle ne fait pas glisser un sous-menu qui est ouvert si aucun autre menu n'est survolé, laissant ce sous-menu ouvert en permanence. C'est ce que fait mon code. :) –

1

Pas vraiment sûr, la chaîne peut-être le slideUp au slideDown?

Consultez cette page: http://jqueryfordesigners.com/ très bons podcasts sur jquery. Youll porbbaly trouver une réponse là

+0

Nous vous remercions du lien. –

Questions connexes