Déplacement d'une classe "active" sur menu

Hello,
j’ai utilisé le framework boostrat twitter pour mon portfolio. Mon menu principal comportait des simples liens avec une classe "active" qui servait à mettre en surbrillance le menu actif, tout ceci était orchestré par du jQuery, jusque-là rien de bien compliqué. J’ai dû hiérarchiser un de mes menu principaux (menu Graphics) en sous-groupes et c’est là que je n’arrive plus à lui attribuer la classe active. Quelqu’un pourrait m’éclaircir la lanterne parce que je tourne en rond depuis un bout de temps maintenant...
Puisqu’une image vaut mieux qu'un long discours, voilà la partie de code qui me donne du fil a retordre... merci!

code html

        <ul class="nav" id="filtre">
          <li> <a href="#">Home</a> </li>
          <li class="active"><a href="#">All</a></li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Graphics<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Print Design</a></li>
              <li><a href="#">Identity Design</a></li>
              <li><a href="#">Print Book</a></li>
            </ul>
          </li>
          <li><a href="#">Web</a></li>
        </ul>

code js

	$("#filtre li a").click(function() {
		
	$("#filtre li").removeClass("active");
	$(this).parent().addClass("active");
		
		return false;
		
	});

Modifié par porcini (04 Jun 2012 - 11:18)

Avec ton code, le <li> directement parent de ton élément <a> obtiendra la classe active. Donc, si tu veux l'appliquer au <li> parent d'un groupe de menu il faudra évidemment change ton sélecteur.

Cela dit, ce n'est peut-être pas ton problème ? As-tu plus de détail, voir même un exemple en ligne ?

Car si on expose ton cas simplement, ta fonction fonctionne:

http://jsfiddle.net/vaxilart/KZ2Ny/

(Mais pourrait être optimisée ainsi: http://jsfiddle.net/vaxilart/KZ2Ny/3/)
Modifié par Vaxilart (05 Jun 2012 - 04:14)

Bonjour et merci pour l'intérêt
en effet en passant par jsfiddle.net il n’y a pas de problèmes, mais j’ai l’impression qu’il existe un conflit avec le fichier bootstrap-dropdown.js, en effet avec Safari, Google Chrome et Firefox parfois la classe active reste calée sur le menu All, il arrive aussi que la classe active fonctionne mais le menu ul avec la classe dropdown-menu ne soit plus pris en considération, donc il ne se déplie plus... c’est aléatoire, selon moi il doit y avoir un conflit quelque part.
Avec Opera c’est simple, le menu ne se déplie tout simplement pas, donc comme pour les autres navigateurs la classe dropdown-menu n’est plus pris en considération, et avec IE je n’ai pas encore testé...

Je dois dire que cela me pose un problème et je n’ai pas envie de changer la disposition de mon menu juste parce que je n’arrive pas à trouver une solution, je préfère persévérer et essayer de trouver la solution même si je dois y passer plus de temps.
Je tiens à préciser que je me suis lancé dans la programmation web seulement depuis quelques mois donc je ne peux qu’espérer une aide sur les forums sinon je risque vraiment d’y passer encore pas mal de temps....

Je vais faire quelques essais avec la deuxième proposition, malheureusement le site est encore en local mais je vais essayer de mettre une page d'exemple dans un sous-dossier dans mon espace web...
Modifié par porcini (06 Jun 2012 - 09:02)

Bonjour,

As-tu encore le même problème quand tu commente cette ligne ?

https://github.com/twitter/bootstrap/blob/master/js/bootstrap-dropdown.js#L96

Bonjour,
j’ai pu résoudre le problème à moitié (je dois admettre que j’y suis arrivé un peu par hasard...), apparemment le souci se situait au niveau du return false, si j'ai bien compris il devrait être en rapport avec la fonction globale et non en rapport avec la fonction du click, là du coup ça marche...
J’ai un autre souci, en cliquant directement sur Graphics la classe active se déplace bien sur le menu correspondant, par contre quand je passe dans les sous-menus elle devrait rester active sur Graphics, ce qui n’est pas le cas...

...comme d’habitude puisqu’une image vaut mieux qu'un long discours, voilà la page en question, ici sans le fond on peut mieux comprendre le problème.
Si t'as une idée elle est la bienvenue, en tout cas merci pour le coup de pouce


P.S. ...au fait je viens de me rendre compte que le premier problème fonctionne seulement après quelques secondes de latence et de clicks répétitifs , ce n'est pas immédiat...
P.S.2 ... même en commentant la ligne 96 je n'ai pas le résultat voulu...
Modifié par porcini (06 Jun 2012 - 12:32)