navigation accordéon jQuery avec mouseover/mouseout

Question

Je suis en train de créer un menu de navigation accordéon avec les propriétés suivantes:

Passez la souris sur un parent LI et ses diapositives sous-menu déroulant. Si vous passez la souris sur le sous-menu, il reste ouvert comme vous le souhaitez.

Si vous déplacez le curseur hors soit le lien parent ou le sous-menu, les diapositives sous-menu à nouveau.

Je pensais que je me rapprochais - je peux faire glisser le sous-menu vers le sous-menu, mais lorsque je le survole, j'ai dû passer la souris sur le parent LI, déclenchant un slideUp. Je n'arrive pas à comprendre comment faire ce que j'ai besoin de faire!

Voici mon script:

<script type="text/javascript"> 

$(document).ready(function() { 

//If its a page parent (based off wordpress), add the class "display-list" 
//This way the accordion will be opened up on the page you are on. 
if ($('#nav li').hasClass("current_page_parent")) { 
$('#nav .current_page_parent ul').addClass("display-list"); } 

// Hide the submenus 
$('#nav li ul').hide(); 
// Add a class to the parent li IF it has sub UL's 
$("#nav li:has(ul)").addClass("nav-parent"); 
// Add a class to sub-UL if it has a parent LI 
$("#nav li ul").addClass("nav-child"); 

// When you hover over the link in the parent LI... 
$('#nav li.nav-parent').mouseover(function() { 
// ...slide the sub-UL into view, and remove the 'display-list' class 
$(this).children('.nav-child').slideDown(1000).removeClass("display-list"); 
}).mouseout(function() { 
$(this).children('.nav-child').slideUp(1000); 
}); 

}); 
</script> 

Et voici mon code HTML:

<!-- Start: Navigation --> 
<ul id="nav"> 
<li class="hidden"><a href="#main">Skip to Content</a></li> 
<li class="page_item page-item-2 current_page_item"><a href="http://www.examplewebsite.com">Home</a></li> 
<li class="page_item page-item-44"><a href="http://www.examplewebsite.com/who-we-are/">Who we are</a> 
    <ul> 
     <li class="page_item page-item-99"><a href="http://www.examplewebsite.com/who-we-are/partners-consultants-and-alliance-partners/">Partners, Consultants and Alliance Partners</a></li> 
     <li class="page_item page-item-105"><a href="http://www.examplewebsite.com/who-we-are/who-we-work-with/">Who we work with</a></li> 
     <li class="page_item page-item-107"><a href="http://www.examplewebsite.com/who-we-are/coffey-graham-north-star-alliance/">Coffey Graham North Star Alliance</a></li> 
    </ul> 
</li> 
<li class="page_item page-item-47"><a href="http://www.examplewebsite.com/what-we-do/">What we do</a> 
    <ul> 
     <li class="page_item page-item-48"><a href="http://www.examplewebsite.com/what-we-do/technology-transactions-and-outsourcing/">Technology transactions and Outsourcing</a></li> 
     <li class="page_item page-item-53"><a href="http://www.examplewebsite.com/what-we-do/dispute-resolution-and-avoidance-arbitration-mediation-and-litigation/">Dispute Resolution and Avoidance: Arbitration, Mediation and Litigation</a></li> 
     <li class="page_item page-item-56"><a href="http://www.examplewebsite.com/what-we-do/company-commercial-and-private-equity-work/">Company/Commercial and Private Equity Work</a></li> 
     <li class="page_item page-item-314"><a href="http://www.examplewebsite.com/what-we-do/virtual-general-counsel-service/">Virtual General Counsel Service</a></li> 
     <li class="page_item page-item-117"><a href="http://www.examplewebsite.com/what-we-do/training-and-coaching/">Training and coaching</a></li> 
    </ul> 
</li> 
<li class="page_item page-item-59"><a href="http://www.examplewebsite.com/see-us-in-action/">See us in action</a> 
    <ul> 
     <li class="page_item page-item-152"><a href="http://www.examplewebsite.com/see-us-in-action/blog/">Blog</a></li> 
     <li class="page_item page-item-154"><a href="http://www.examplewebsite.com/see-us-in-action/podcasts/">Podcasts</a></li> 
     <li class="page_item page-item-150"><a href="http://www.examplewebsite.com/see-us-in-action/training-and-coaching/">Training and coaching</a></li> 
     <li class="page_item page-item-160"><a href="http://www.examplewebsite.com/see-us-in-action/publications/">Publications</a></li> 
    </ul> 
</li> 
<li class="page_item page-item-69"><a href="http://www.examplewebsite.com/contact/">Contact</a></li> 
</ul> 
<!-- End: Navigation --> 

Je serais vraiment apprécier toute aide, s'il vous plaît!

Answer 1

Je ne sais pas ce que tout est sur votre page mais cela semblait fonctionner avec ce code fourni. faire

// When you hover over the link in the parent LI... 
$('#nav li.nav-parent').mouseover(function() { 
self = this; 
// ...slide the sub-UL into view, and remove the 'display-list' class 
$('#nav li.nav-parent').each(function(){if(self != this)$(this).children('.nav-child').slideUp(1000)}); 
$(this).children('.nav-child').slideDown(1000).removeClass("display-list"); 
}); 

aussi sûr de se débarrasser de votre code mouseout

Answer 2

OK, merci pour tous ceux qui ont consulté la page: Il est tard et pas complètement testé, mais donner ce coup. J'ai à peu près réussi à régler ça maintenant. Je l'ai remplacé le bloc jQuery contenant mouseover et mouseOut avec:

$("#nav li.nav-parent").hover(
function() { 
$(this).children('.nav-child').stop(true,true).slideDown(1000).removeClass("display-list"); // fired on mouseover 
}, 
function() { 
$(this).children('.nav-child').slideUp(1000); // fired on mouseout 
} 
); 

Il est un peu saccadée si vous exécutez le curseur et vient au-dessus, mais au moins fonctionne. Je voudrais bien arrêter la file d'attente d'animation si possible.

Answer 3

Je suggère d'utiliser la magnifique accordéon (avec fonctionnalité de vol stationnaire) de jQuery UI: http://jqueryui.com/demos/accordion/#hoverintent

Answer 4

Je sais que c'est un ancien poste, mais je pensais que je contribuerais pour quelqu'un d'autre à la recherche d'aide. Vous devriez vraiment utiliser le gestionnaire d'événements .on() au lieu de .hover() pour les nouvelles versions de jQuery. Voici un exemple d'un que j'utilise sur un site ...

$('.leftnav-item:not(.active)').on({ 

    mouseenter: function() { 
     $(this).find('.nav-sublock').stop(true,true).slideDown(500); 
    }, 

    mouseleave: function() { 
     $(this).find('.nav-sublock').slideUp(500); 
    } 

});