jQuery déroulant - survoler pour des classes supplémentaires?

Ceci est ma jquery pour un simple menu drop-down-esq. J'ai des problèmes, cependant. Je veux que la div qui glisse vers le bas lorsque l'utilisateur survole le .mainMenuDiv pour rester en bas quand ils planent sur le div. SubMenu aussi!jQuery déroulant - survoler pour des classes supplémentaires?

Aide! :)

$(function() { 
      var tabContainers = $('div.subMenu > div'); 
      tabContainers.hide(); 

      $('.mainMenuDiv a').hover(
      function() { 
       tabContainers.filter(this.hash).stop(true, true).slideDown(); 
      }, 
      function(){ 
       tabContainers.filter(this.hash).stop(true, true).slideUp(); 
      }); 
    }); 


<div class="mainMenu" align="center"> 
    <table cellpadding="0" cellspacing="0" border="0" width="950"> 
     <tr> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/new/#new" class="mainMenuLink" id="1">I'm New</a></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/ministries/#ministries" class="mainMenuLink">Ministries</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/beliefs/#beliefs" class="mainMenuLink">Beliefs+Mission</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/listen/#listen" class="mainMenuLink">Listen</a></div></td> 
      <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/connect/#contact" class="mainMenuLink">Connect</a></div></td> 
      <td width="100%"></td> 
     </tr> 
    </table> 
</div> 
    <div class="subMenu"> 
     <div id="new"> 
      <h2>I'm New</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div>

Je sais que le HTML n'est pas grande ... mais est ce que je dois travailler avec ...

Source

2009-09-29 Kevin Brown

Pouvez-vous poster le HTML aussi, s'il vous plaît? –

Si je comprends bien, je pense que vous aurez besoin d'utiliser simplement l'événement mouseover par opposition à hover, par exemple:

$(function() { 
     var tabContainers = $('div.subMenu > div'); 
     tabContainers.hide(); 

     $('.mainMenuDiv a').mouseover(function() { 

      //hide all the containers 
      tabContainers.slideUp(); 

      //slide this one down 
      tabContainers.filter(this.hash).stop(true, true).slideDown(); 
     }); 

     //slide up the container when the mouse is over anything else 
     $('body :not("div.subMenu > div, .mainMenu a")').mouseover(function() { 
      tabContainers.slideUp(); 
     }); 
});

Maintenant, l'on restera ouvert « en cours » jusqu'à ce que la souris frappe un autre lien .

Source

2009-09-29 13:22:28 karim79

C'est presque parfait. Comment les ferais-je fermer quand quelque chose d'autre qu'un lien ou le .subMenu est survolé? (Essentiellement un mouseout?) –

@Kevin Brown - s'il vous plaît voir mon edit, cela devrait le faire. Alternativement, vous pouvez utiliser 'html' au lieu de 'body' dans le sélecteur pour le second passage de souris. J'espère que cela résout. – karim79

Presque là! Le sous-menu ne reste pas enfoncé à moins que je déplace rapidement la souris du menu au sous-menu. Probablement à cause des tables: (... Est-ce qu'une fonction timeout courte pourrait résoudre cela? Ou peut-être le plugin hoverIntent? Mon client veut que je garde les tables, donc je dois faire fonctionner ça. –

Je ne suis pas sûr si je vous comprends bien, mais vous pouvez sélecteurs de chaîne ensemble en utilisant une simple virgule.

Alors peut-être cela fonctionnera

$('.mainMenuDiv a, div.subMenu > div').hover(

Si je manque quelque chose s'il vous plaît envoyer votre code HTML aussi.

Source

2009-09-29 13:16:25 32423hjh32423

jQuery déroulant - survoler pour des classes supplémentaires?

Répondre

Questions connexes