jQuery – Lien actif et relation parent

Je travaille sur une navigation pour un site et j’ai besoin de conseils sur l’ajout dynamic d’une classe au lien actif. En outre, une fois que ce lien est établi et que je dois faire référence au parent et le faire “afficher”.

C’est ce avec quoi je travaille. La navigation est de type accordéon mais n’utilise pas l’interface utilisateur de l’accordéon.

Ensuite, j’ai un peu de jQuery pour masquer initialement les éléments de sous-menu:

 $(function(){ $('ul#menu3 ul').hide(); $('ul#menu3 > li > a.drop').click(function(){ $(this).parent().children('ul').toggle("slow"); return false; }); 

Jusqu’ici tout va bien. Tout fonctionne.

Maintenant, je voudrais mettre en évidence de manière dynamic le lien actif et j’ai essayé d’utiliser:

 var path = location.pathname.subssortingng(1); if ( path ) $('ul#menu3 a[href$="' + path + '"]').attr('class', 'selected'); 

mais cela ne semble pas être suffisant pour append la classe correcte.

La dernière chose à faire est d’ouvrir la navigation au groupe actif. Par exemple, si Audio est la page actuelle, la section Informations de l’accordéon de navigation sera ouverte pour afficher le lien actif.

J’apprécierais vraiment une aide sur ceci. Merci.

Ce qui suit fonctionne bien pour moi. De plus, votre code “sélectionné” ajouté fonctionne comme prévu. Commentaires fournis en ligne. Si la question rest ouverte … commentez / demandez.

 $(function() { var pathname = location.pathname; var highlight; //highlight home if(pathname == "/") highlight = $('ul#menu3 > li:first > a:first'); else { var path = pathname.subssortingng(1); if (path) highlight = $('ul#menu3 a[href$="' + path + '"]'); } highlight.attr('class', 'selected'); // hide 2nd, 3rd, ... level menus $('ul#menu3 ul').hide(); // show child menu on click $('ul#menu3 > li > a.drop').click(function() { //minor improvement $(this).siblings('ul').toggle("slow"); return false; }); //open to current group (highlighted link) by show all parent ul's $('a.selected').parents("ul").show(); //if you only have a 2 level deep navigation you could //use this instead //$('a.selected').parents("ul").eq(0).show(); });