Javascript - Menü, ausfahrbar, bei Klick andere Menüpunkte sollen einfahren

ArcVieh · #1 (**permalink**) 23.04.2007, 21:11

Hallo,
ich mache jetzt seit ca. 3 Stunden Javascript (Also ich bin darin nicht wirklich erfahren, will es auch eig gar nicht sein, aber es geht halt jetzt nicht anders).

Mein Problem ist, das ich ein Menü habe was von PHP generiert wird. Momentan sind es 3 Hauptmenüpunkte. Wenn man auf einen Klickt, wird unter dem Menüpunkt Unterpunkte sichtbar.

Wenn ich jetzt aber auf ein anderes Hauptmenü Dingen klicke, soll der Rest wieder einfahren.

Code:

<script type="text/javascript">
		var anzahl = 2;	</script>
	<script type="text/javascript" src="menue.js"></script>
	<style type="text/css">
	<!--
			ul#u0 {
					display:none;
			}
			ul#u1 {
					display:none;
			}
			ul#u2 {
					display:none;
			}
	-->
	</style>
</head>
<body>
[....]
<ul class="nav">
				<li>
					<a href="#" title="USB" onclick="show('u0')">USB</a>
					<ul id="u0">

						<li><a href="?USB=Link1" title="Link1">Link1</a></li>
						[....]
						<li><a href="?USB=Link3" title="Link3">Link3</a></li>
					</ul>
				</li>
				<li>
					<a href="#" title="Firewire" onclick="show('u1')">Firewire</a>

					<ul id="u1">
						<li><a href="?Firewire=Link1" title="Link1">Link1</a></li>
						[....]
						<li><a href="?Firewire=Link3" title="Link3">Link3</a></li>
					</ul>
				</li>
				<li>

					<a href="#" title="Allgemeines" onclick="show('u2')">Allgemeines</a>
					<ul id="u2">
						<li><a href="?Allgemeines=Link1" title="Link1">Link1</a></li>
[....]
						<li><a href="?Allgemeines=Link4" title="Link4">Link4</a></li>

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

menu.js

Code:

function show(id)
{
	var id 		= id;
		if(document.getElementById)
		{
			var anzahl = anzahl;
			for(var i = 0; i <= anzahl; i++)
			{
				var pruef = 'u' + i;
				if(id != pruef)
				{
					document.getElementById(pruf).style.display = "";
				} else {
					document.getElementById(id).style.display = document.getElementById(id).style.display? "":"block";
				}
			}
		}
}

Klicke ich auf USB, soll darunter id=u0 ausfahren. Klicke ich zum Beispiel auf Allgemeines, soll id=u0 aber wieder einfahren usw.

Ich hoffe, das war so weit verständlich.

Hoffentlich kann mir einer helfen.

EDIT:

Code:

for(var i = 0; i <= anzahl; i++)
			{
				var pruef = 'u' + i;
				if(id != pruef)
				{
					document.getElementById(pruf).style.display = "";
				} else {
					document.getElementById(id).style.display = document.getElementById(id).style.display? "":"block";
				}
			}

War so gedacht, das alle ids die nicht der geklickten id entsprechen wieder auf style = "" gesetzt werden, also halt none, wie es oben im style- Bereich definiert ist. Doch es funktioniert nicht..

ArcVieh · #2 (**permalink**) 24.04.2007, 16:16

Es hat sich erledigt, ich bin selbst auf die Lösung gekommen, aber trotzdem danke.

Habe es folgerndermaßen gelöst, in so fern jemand das gleiche probieren sollte wie ich:

Code:

function show(id)
{
	var id 		= id;
		if(document.getElementById)
		{
			var anzahl = anzahl;
			document.getElementById(id).style.display = document.getElementById(id).style.display? "":"block";
			for(var i = 0; i <= 2; i++)
			{
				var pruef = 'u' + i;
				if(id != pruef)
				{
					document.getElementById(pruef).style.display = "";
				} 
			}
		}
}

mfrosch · #3 (**permalink**) 17.09.2010, 16:15

Hallo ArcVieh,

danke für Deinen Schnipsel.
Habe mir erlaubt Deine Schleife einwenig dynamischer zu gestalten. Dadurch ist es egal wieviel Elemente es gibt.

Algemeiner Tipp, ich würde es nicht empfehlen einfach nur $i hoch zu schrauben, dies ist unperformant und der IE wirft einen Skript Error.

Evtl. kanns ja jmd. gebrauchen.

Beste Grüße,
Matthias

menu.js

Code:

function showSubNav(id)
{
	var id = id;
		if(document.getElementById)
		{
			var anzahl = anzahl;
			document.getElementById(id).style.display = document.getElementById(id).style.display? "":"block";
			
			var loop = true;
			var i = 0;
			while(loop)
			{
				var pruef = 'u' + i;
				if(id != pruef && document.getElementById(pruef))
				{
					document.getElementById(pruef).style.display = "";
				}		
				else if (!document.getElementById(pruef))
				{
					loop = false;
				}
				i++;
			}
		}
}

Thielo · #4 (**permalink**) 17.09.2010, 23:58

*hust* Das Teil hier war fast 3 einhalb Jahre alt...

mfrosch · #5 (**permalink**) 18.09.2010, 00:17

jop ich weiß, war bei meiner google Suche aber oben dabei : )

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Frage zu einem Javascript für ein Animiertes Menü	infernalshade	Javascript & Ajax	4	05.05.2009 14:58
Menü mit Javascript mit "Windows-Verhalten"	grischa_sgd	Javascript & Ajax	13	03.06.2008 16:27
Menü austauschen mit JavaScript	Lestat	Javascript & Ajax	1	09.09.2006 11:33
JavaScript - keine Menü und Adressleiste	fabske	Javascript & Ajax	9	20.04.2006 12:00
verschachtelte divs, javascript menü - firefox macht ärger	fork	(X)HTML	14	05.11.2005 12:35