"active"-Klasse hinzufügen

[vendy]

Hallo,

ich habe ein Problem bei einem Dropdownmenü. In der horizontalen Navigation wird bei :hover über den jeweiligen Link das Submenü sichtbar. Zusätzlich hat der jeweilige Link ein anderes Hintergrundbild beim :hover. Wenn man jetzt mit der Maus auf das Submenü fährt soll der jeweilige Link die Klasse "active" bekommen damit das Hintergrundbild nicht verschwindet.

Momentan bekommen allerdings alle Links die Klasse "active". Es soll jedoch nur der submenüspezifische Link sein. Siehe: http://www.kinder-aktuell.de/v2/

Der HTML Code

<ul id="navigation">
                <li class="schwangerschaft">
                	<a href="#" title="">Basteln</a>
                     <ul id="dd-schwangerschaft" class="sub">
                    	<li class="first"><a href="#" title="">Einladungskarten</a></li>
                        <li><a href="#" title="">Kinderspiele</a></li>
                        <li><a href="#" title="">Kindergeburtstag</a></li>
                        <li><a href="#" title="">Gesundheit</a></li>
                        <li><a href="#" title="">Kinderlieder</a></li>
                        <li class="last"><a href="#" title="">Sonstiges</a></li>
                    </ul>

                </li>
            ....
                
      </ul>

Mein bisheriges JS

jQuery('ul.sub').hover(function() {
		jQuery('ul#navigation li a').addClass('active'); }, 
		function() { jQuery('ul#navigation li a').removeClass('active');
	});

Kann mir da jemand weiterhefen?

 

[Sven Mintel]

Moin vendy,

so sollte es gehen:

jQuery('ul#navigation li a').hover(
  function() 
		{ 
		  jQuery('ul#navigation li a').removeClass('active');
		  jQuery(this).addClass('active'); 
	  }
		
	);

 

[vendy]

Danke! Hatte es allerdings zeitlgleich anders gelöst. Blöderweise habe ich noch ein weiteres Problem. Bei :hover soll bei dem entsprechenden Link die Klasse "current" entfernt werden damit das Dropdownmenü einwandfrei angezeigt werden kann. Danach soll die Klasse "current" wieder hinzugefügt werden. Das funktioniert bisher nur so halb. Wenn man mit der Maus über das Dropdownmenu fährt blitzt die Klasse "current" immer mal wieder auf. Wie kann ich den :hover auch auf die UL ausweiten? Siehe This is kinder-aktuell.de

// Navigation
	jQuery('ul#navigation li a').hover(function() {
		jQuery('ul#navigation a.current').removeClass("current").addClass("nothing");
		}, 
		function() {
			jQuery('ul#navigation a.nothing').addClass("current").removeClass("nothing");
	});
												 
	jQuery('ul.sub').hover(function() {
		jQuery(this).prevAll().addClass("active") }, 
		function() { jQuery(this).prevAll().removeClass('active');
	});

 

[vendy]

Habe es jetzt hinbekommen. Bin nicht so der Js-Checker, kann man da noch Sachen vereinfachen/zusammenfassen?

// Navigation
	jQuery('ul#navigation li a.firstlevel').hover(function() {
		jQuery('ul#navigation a.current').removeClass("current").addClass("nothing");
	}, function() {
			
			jQuery('ul#navigation a.nothing').addClass("current").removeClass("nothing");
			
			jQuery('ul.sub').hover(function() {
				jQuery(this).prevAll().addClass("active");
				jQuery('ul#navigation a.current').removeClass("current").addClass("nothing");
			}, function() {
				jQuery(this).prevAll().removeClass('active');
				jQuery('ul#navigation a.nothing').addClass("current").removeClass("nothing");
			});

	});