jQuery UI Accordéon - réactiver l'élément actif par défaut sur mouseout

Question

J'utilise un accordéon pour la navigation et j'ai besoin que chaque élément devienne actif au survol de la souris, mais au départ, l'élément actif initial devrait se développer au lieu du dernier plané.

C'est ce que je suis en train:

<div id="accordion"> 
    <h3 id="item-1">Item 1</h3> 
    <div id="item-1-content">Item 1 content</div> 
    <h3 id="item-2">Item 2</h3> 
    <div id="item-2-content">Item 2 content</div> 
    <h3 id="item-3">Item 3</h3> 
    <div id="item-3-content">Item 3 content</div> 
</div> 

Et les js:

$("#accordion").accordion({ 
    event: "mouseover", 
    active: "#item-1", 
    collapsible: false 
}).mouseout(function() { 
    $(this).accordion('option', 'active', '#item-1'); 
}); 

Sur chargement de la page, # item-1 contenu est dilatée comme il se doit. Si je déplace la souris sur # item-2, # item-2-content se développe et # item-1-content se rétrécit, comme ils le devraient. Quand je déplace la souris à l'extérieur de l'accordéon, # item-1-content devrait redevenir l'élément développé, mais cela n'arrive pas.

Si j'omets le rappel "mouseout", le dernier élément survolé reste actif. Si je le laisse de cette façon, le "mouseout" est déclenché même si vous ne "quittez" pas l'accordéon à cause d'un événement qui bouillonne, conduisant à un comportement étrange. Dois-je empêcher le bouillonnement des éléments en accordéon ou existe-t-il un moyen d'obtenir cette fonctionnalité grâce à une combinaison d'options accordéon?

Answer 1

Notez le difference between "mouseout" and "mouseleave" et entre la définition de l'option "active" de l'accordéon et l'activation d'une partie de contenu! Le droit code js doit être:

$("#accordion").accordion({ 
    event: "mouseover", 
    active: "#item-1", 
    collapsible: false 
}).mouseleave(function() { 
    $(this).accordion('activate', "#item-1"); 
}); 

Answer 2

Je ne suis pas très familier avec l'accordéon parce que je ne l'ai utilisé qu'une ou deux fois, mais avec votre souris, ne devriez-vous pas utiliser # item-1 au lieu de # selected-menu?