jQuery Accordion navigationFilter ouvrir en-tête avec la page actuelle

Question

juste un rapide ici, mais seulement pour les experts jQuery.

Quelle serait la meilleure façon d'avoir l'accordéon jQuery toujours ouvrir l'en-tête qui contient le lien vers la page où se trouve actuellement l'utilisateur?

Code actuel:

$(function() { 
     $('ul.drawers').accordion({ 
      header: 'H2.drawer-handle', 
      selectedClass: 'open', 
      collapsible: true, 
      active: false, 
      event: 'mouseover', 
      navigation: true, 
     }); 
}); 

$('ul.drawers').accordion('option', 'navigationFilter', function(){ 
     //Your code for the NavigationFilter }); 
</script> 

Tous les meilleurs, Robert

est ici le code html:

<ul class="drawers"> 
<li class="drawer"> 
<h2 class="drawer-handle"><a class="lahtine" href="http://www.viking.ee/en/outwardwindows/">Outward Opening Windows</a></h2> 
<div class="menu-outward-opening-windows-container"><ul id="menu-outward-opening-windows" class="menu"><li id="menu-item-789" class="menu-item menu-item-type-post_type menu-item-789"><a href="http://www.viking.ee/en/windows/aluclad/">Aluminium Clad Wooden Windows</a></li> 
<li id="menu-item-790" class="menu-item menu-item-type-post_type menu-item-790"><a href="http://www.viking.ee/en/windows/doubleglazedwindow/">Double Glazed Window</a></li> 
<li id="menu-item-791" class="menu-item menu-item-type-post_type menu-item-791"><a href="http://www.viking.ee/en/windows/tripleglazing/">Energy Efficient Triple Glazed Window</a></li> 
<li id="menu-item-792" class="menu-item menu-item-type-post_type menu-item-792"><a href="http://www.viking.ee/en/windows/secure/">Secured By Design</a></li> 
</ul></div></li> 
<li class="drawer"> 
<h2 class="drawer-handle"><a href="http://www.viking.ee/en/inwardwindows/">Inward Opening Windows</a></h2> 
<div class="menu-inward-opening-windows-container"><ul id="menu-inward-opening-windows" class="menu"><li id="menu-item-793" class="menu-item menu-item-type-post_type menu-item-793"><a href="http://www.viking.ee/en/windows/woodenwindows/">Inward Opening Wooden Windows</a></li> 
<li id="menu-item-794" class="menu-item menu-item-type-post_type menu-item-794"><a href="http://www.viking.ee/en/windows/timberthermalwindow/">Timber Thermal Window</a></li> 
</ul></div></li> 
<li class="drawer"> 
<h2 class="drawer-handle"><a href="http://www.viking.ee/en/selection/">Additional Selection</a></h2> 
<div class="menu-additional-selection-container"><ul id="menu-additional-selection" class="menu"><li id="menu-item-795" class="menu-item menu-item-type-post_type menu-item-795"><a href="http://www.viking.ee/en/windows/fireguard/">Viking Fireguard Window</a></li> 
<li id="menu-item-796" class="menu-item menu-item-type-post_type menu-item-796"><a href="http://www.viking.ee/en/windows/slidingsash/">Traditional Sliding Sash</a></li> 
</ul></div></li> 
<li class="drawer"> 
<h2 class="drawer-handle"><a href="http://www.viking.ee/en/exteriordoors/">Exterior Doors</a></h2> 
<div class="menu-exterior-doors-2-container"><ul id="menu-exterior-doors-2" class="menu"><li id="menu-item-797" class="menu-item menu-item-type-post_type current-menu-item menu-item-797"><a href="http://www.viking.ee/en/doors/alucladdoors/">Viking Double Glazed Alu-Clad Door</a></li> 
<li id="menu-item-798" class="menu-item menu-item-type-post_type menu-item-798"><a href="http://www.viking.ee/en/doors/tripleglazed/">Energy Efficient Triple Glazed Wooden Doors</a></li> 
</ul></div></li> 
<li class="drawer last"> 
<h2 class="drawer-handle"><a href="http://www.viking.ee/en/slidingdoors/">Sliding/Folding Doors</a></h2> 
<div class="menu-sliding-and-folding-doors-container"><ul id="menu-sliding-and-folding-doors" class="menu"><li id="menu-item-799" class="menu-item menu-item-type-post_type menu-item-799"><a href="http://www.viking.ee/en/doors/sliding/">The Sliding Door</a></li> 
</ul></div></li> 
</ul> 

Answer 1

Sans y voir le reste du code/html, ou savoir quel accordéon pluggin vous utilisez spécifiquement. Je dirais que la façon la plus simple serait de comparer le document.location.pathname (ou d'en analyser seulement le nom de fichier .html) et ensuite vous pouvez faire quelques choses.

1) exécuter une fonction à l'aide ci-dessus pour ajouter la classe requise à l'élément qui correspond à votre emplacement actuel (url) alors quand le menu est initialisé, il sait que pour développer

2) exécuter une fonction après la Le menu est initialisé pour détecter quel en-tête contient votre page actuelle et déclencher l'événement pour le développer. Utilisez-vous l'accordéon de l'interface utilisateur jQuery? Si oui, la syntaxe est:

 `$(yourMenuSelector).accordion("activate",indexOfHeaderToOpen);` 

Heureux de vous aider si vous pouvez fournir plus d'informations, mais cela devrait faire tourner les roues.