Java Script Eventhandler untermenü einblenden?

[Hyper Lord]

Hallo ich bastel zu verständniszwecken ein dropdownmenü und hänge an einer Stelle!
ich möchte eine Animation zum Handler des Li Elements übergeben, der Animation muss ich mitteilen welches untermenü eingebelndet werden soll. Es ist einfach, wenn ich das über html aufrufe, da kann ich einfach this als parameter übergeben!

<li onmouseover=fadeIn(this)>...</li>

Wie aber kann ich rausfinden welches li element gerade gemeint ist, wenn ich die animation fadeIn(elem) über eine addEventlistener funktion anbinde?

hier die funktion:

function fadeIn(elem) {
		var o = elem.childNodes.getElementsByTagName('UL');
		o.style.display = "block";
		var opac = transStep/transitionsSteps;
	
		// fade in the next slide
		o.style.opacity = "" + opac;
		o.style.filter = "alpha(opacity=" + (opac*100) + ")";
	
		if (++transStep <= transitionsSteps)
			transTimeout = setTimeout(function(){fadeIn(elem)}, interval);
	
}

Vielen Dank für die Mühe

 

[tombe]

Wäre es nicht in etwa so am einfachsten:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("li").hover(function () {
	$("li div").css("display", "none");
	$(this).find("div").css("display", "block");
});

});
</script>

<ul>
	<li>Eintrag 1</li>
		<div style="display: none;">Zusatz zum ersten Eintrag</div>
	<li>Eintrag 2</li>
		<div style="display: none;">Zusatz zum zweiten Eintrag</div>
	<li>Eintrag 3</li>
		<div style="display: none;">Zusatz zum dritten Eintrag</div>
	<li>Eintrag 4</li>
		<div style="display: none;">Zusatz zum vierten Eintrag</div>
	<li>Eintrag 5</li>
		<div style="display: none;">Zusatz zum f&uuml;nften Eintrag</div>
</ul>

 

[Hyper Lord]

super danke für die schnelle antwort,
ja natürlich ist es mit jQuery extremst einfach...
aber ich möchte verstehen was und wie das genau passiert,
für mich ist es sehr wichtig so was zu verstehen und an dieser stelle hänge ich einfach fest...
oder ich steh auf n Schlauch weil ich schon zu lange daran überlege

 

[tombe]

Also mit obigem Code erhält jedes "li" Element eine hover-Funktion, das müsste ja klar sein.

$("li div").css("display", "none");

Hiermit wird allen DIVs die direkt auf ein LI folgen die CSS-Eigenschaft display = none zugewiesen das sie alle wieder unsichtbar sind.

$(this).find("div").css("display", "block");

Und hiermit wird dann der DIV nach den aktuellem LI-Element (Zugriff erfolgt mit "this") kommt ebenfalls durch CSS eingeblendet.

Ansonsten einfach mal auf jquery.com im Suchfeld hover, find oder this eingeben. Dann wird es schön erklärt.

 

[Hyper Lord]

also ich glaube wir reden aneinander vorbei, ich kenne das jQuery, ich möchte aber ein menü bauen um zu lernen, das obige Problem würde ich dabei gerne lösen um zu verstehen wie es geht(ohne Framework). Da ich mit Java Skript noch so meine Probleme habe bastel ich mich halt da durch und suche um Rat wenn ich was nicht verstehe...
Ja und ich weiss es ist einfacher mit jQuery oder Motools und alle anderen, aber das bringt mir jetzt gerade leider nichts...

trotzdem vielen dank für deine ausführliche Antwort

ps das "this" hat mich schon interessiert, da es ja mein Problem betrifft, glaub ich zumindest, is ja der zeiger auf das li element aber da wird auf der api seite von jQ nix gefunden

 

[tombe]

Stimmt dann reden wir wirklich aneinander vorbei.

Beschreibe doch bitte nochmal genauer was dir jetzt unklar ist und was/wie du es gerne hättest. Dann findet sich dafür sicher auch eine Lösung.

...aber da wird auf der api seite von jQ nix gefunden...

Wieso wird da nichts von jQuery gefunden? Mit $(this) habe ich Zugriff auch alles was der entsprechende LI so zu bieten hat.

 

[Hyper Lord]

so, also
ich habe es hinbekommen, es ging darum das ich nicht verstanden habe wie ich das li element, welches das Event feuert an die Animation übergebe, damit genau das child 'ul' eingeblendet wird! Habe wohl etwas falsch gemacht vorher, aber jetzt funktioniert es genauso einfach wie ich es auch gedacht habe...
hier der ausschnitt:

function wsNav( options ) {
	if ( !document.getElementById(options.id) ) {
		return new Boolean(false);
	}

	var li=document.getElementById(options.id).getElementsByTagName('LI');
	var i=li.length,a=0;
	var self=this;
	var find = function(elem, tag){
		var child=elem.getElementsByTagName(tag);
		if ( child.length>0 ) {
			for (var i=0;i<child.length;i++) {
				if (child[i].nodeName===tag)
					return child[i];
			}
		}
		return false;
	};
	this.id=options.id;
	this.menu = document.getElementById(options.id); 
	this.counter = 0;
		for ( ;a<i;a++) { 
			var ul=find(li[a],'UL');
			if ( ul.nodeName==='UL' ) {

				li[a].onmouseover=function(){fadeIn(this);}; //hier hatte ich Probleme, weil vorher 'this' nicht auf das 'li' gezeigt hat
				li[a].onmouseout=function(){fadeOut(this);};
			}
		}

ist nur zu übungszwecken und auch noch nicht fertig, habe auch einige Methoden weggelassen der Übersicht halber!
Vielen dank nochmal
Gruss Hyper Lord