lesliejul: Ein-/Ausblenden von Menüunterpunkten

Hallo :)
Auf meiner Seite habe ich ein Menü mit verschieden vielen Unterpunkten. Diese sollen bei Klick auf den dazu gehörigen Menüpunkt eingeblendet werden und bei Klick auf einen anderen Menüpunkt wieder ausgeblendet werden. Ist ein Unterpunkt ausgewählt sollen die Unterpunkte dieses Bereichs eingeblendet bleiben.
Das funktioniert soweit auch. Ausgewählte Unterpunkte bleiben eingeblendet, bei Klick auf einen Menüpunkt werden dessen Unterpunkte eingeblendet und solange kein Unterpunkt ausgewählt ist blenden sich diese auch wieder richtig aus.. nur wenn ein Unterpunkt gewählt ist, werden nur darüber liegende Unterpunkte ausgeblendet, die darauf folgenden eingeblendeten Unterpunkte bleiben jedoch immer eingeblendet.

Mein javascript schaut wie folgt aus:

  
function punkt1 () {  
  if (document.getElementById)  
    document.getElementById("punkt1").style.display = "inline";  
    document.getElementById("punkt2").style.display = "none";  
    document.getElementById("punkt3").style.display = "none";  
    document.getElementById("punkt4").style.display = "none";  
  
  
function punkt2 () {  
  if (document.getElementById)  
    document.getElementById("punkt2").style.display = "inline";  
    document.getElementById("punkt1").style.display = "none";  
    document.getElementById("punkt3").style.display = "none";  
    document.getElementById("punkt4").style.display = "none";  
}  
  
  
function punkt3 () {  
  if (document.getElementById)  
    document.getElementById("punkt3").style.display = "inline";  
    document.getElementById("punkt1").style.display = "none";  
    document.getElementById("punkt2").style.display = "none";  
    document.getElementById("punkt4").style.display = "none";  
}  
  
  
function punkt4 () {  
  if (document.getElementById)  
    document.getElementById("punkt4").style.display = "inline";  
    document.getElementById("punkt1").style.display = "none";  
    document.getElementById("punkt2").style.display = "none";  
    document.getElementById("punkt3").style.display = "none";  
}  

Der dazu gehöriger html-code:

  
<a href="javascript:punkt1()">punkt1</a><BR>  
	  
<p id="punkt1<? if($paktiv == "punkt1") echo "_aktiv"; ?>">  
	<a class="navi<? if($upaktiv == "punkt1up1") echo "_aktiv"; ?>" href="p1up1.php">Unterpunkt1</a><BR>  
	<a class="navi<? if($upaktiv == "punkt1up2") echo "_aktiv"; ?>" href="p1up2.php">Unterpunkt2</a><BR>  
	<a class="navi<? if($upaktiv == "punkt1up3") echo "_aktiv"; ?>" href="p1up3.php">Unterpunkt3</a>  
</p>  
  
  
	  
<a href="javascript:punkt2()">punkt2</a><BR>  
	  
<ul><p id="punkt2<? if($paktiv == "punkt2") echo "_aktiv"; ?>">  
	<a class="navi<? if($upaktiv == "punkt2up1") echo "_aktiv"; ?>" href="p2up1.php">Unterpunkt1</a>  
</p></ul>  
	  
  
  
<a href="javascript:punkt3()">punkt3</a><BR>  
	  
<ul><p id="punkt3<? if($paktiv == "punkt3") echo "_aktiv"; ?>">  
	<a class="navi<? if($upaktiv == "punkt3up1") echo "_aktiv"; ?>" href="p3up1.php">Unterpunkt1</a><BR>  
	<a class="navi<? if($upaktiv == "punkt3up2") echo "_aktiv"; ?>" href="p3up2.php">Unterpunkt2</a>  
</p></ul>  
	  
  
  
<a href="javascript:punkt4()">punkt4</a><BR>  
	  
<ul><p id="punkt4<? if($paktiv == "punkt4") echo "_aktiv"; ?>">  
	<a class="navi<? if($upaktiv == "punkt4up1") echo "_aktiv"; ?>" href="p4up1.php">Unterpunkt1</a><BR>  
	<a class="navi<? if($upaktiv == "punkt4up2") echo "_aktiv"; ?>" href="p4up2.php">Unterpunkt2</a><BR>  
	<a class="navi<? if($upaktiv == "punkt4up3") echo "_aktiv"; ?>" href="p4up3.php">Unterpunkt3</a>  
</p></ul>  

Leider kenn ich mich mit Javascript noch nicht so gut aus, um mein Problem selbst zu lösen. Ich hoffe ich konnte mein Problem verständlich ausdrücken und bin für jede Hilfe dankbar :)
Liebe Grüße

  1. Leider kenn ich mich mit Javascript noch nicht so gut aus, um mein Problem selbst zu lösen.

    Dir scheint ein allgemeiens Grundverständnis zu fehlen - und zwar in sachen Programmiertechnik und nicht nur in JavaScript..

    Jeder Code der bei der bei einer linearen Erweiterung einer bereits bestehenden Funktion mit einer weiteren Iteration wächst hat einen Designfehler.

    Du hast aktuell vier Funktionen für vier Menpunkte - die machen alle dasselbe: einen spezifischen Punkt einblenden und drei andere spezifische ausblenden.

    Wenn du also einen Menüpunkt dazugibst musst du eine Funktion ergänzen und in jeder Funktion einen eintrag hinzufügen.

    Was du eigentlich willst - ist wie du selbst sagst - den derzeitigen Menüpunkt einblenden und alle anderen ausblenden.

    Ob du dann 4, 5, 10 oder 1000 Menüpunkte hast, spielt dann keine Rolle mehr.

    Allem vorweg solltest du aber erst für sauberes HTML sorgen - ohne irgendwelche sinnbefreiten Klassen oder ids die ohnehin für nichts gut sind.

    Aussehen könnte das so:

    <div class="nav">  
    	<ul>  
    		<li><a href="#example">Seite 1</a>  
    			<ul>  
    				<li><a href="#example">Seite 1a</a></li>  
    				<li><a href="#example">Seite 1b</a></li>  
    				<li><a href="#example">Seite 1c</a></li>  
    			</ul>  
    		</li>  
    		<li><a href="#example">Seite 2</a>  
    			<ul>  
    				<li><a href="#example">Seite 2a</a></li>  
    				<li><a href="#example">Seite 2b</a></li>  
    				<li><a href="#example">Seite 2c</a></li>  
    			</ul>  
    		</li>  
    		<li><a href="#example">Seite 3</a>  
    			<ul>  
    				<li><a href="#example">Seite 3a</a></li>  
    				<li><a href="#example">Seite 3b</a></li>  
    				<li><a href="#example">Seite3c</a></li>  
    			</ul>  
    		</li>  
    	</ul>  
    </div>
    

    Das unsinnige div-Element mit der Klasse nav kann auch durch ein nav-Element ersetzt werden, wenn man HTML5 verwenden möchte.

    1. Leider kenn ich mich mit Javascript noch nicht so gut aus, um mein Problem selbst zu lösen.

      Dir scheint ein allgemeiens Grundverständnis zu fehlen - und zwar in sachen Programmiertechnik und nicht nur in JavaScript..

      Jetzt weiß ich, dass ich nichts weiß.
      Okay, das wusste ich auch vorher.

      Was du eigentlich willst - ist wie du selbst sagst - den derzeitigen Menüpunkt einblenden und alle anderen ausblenden.

      Genau. Und wie mache ich das?

      Allem vorweg solltest du aber erst für sauberes HTML sorgen - ohne irgendwelche sinnbefreiten Klassen oder ids die ohnehin für nichts gut sind.

      Und was mache ich mit diesem HTML?

      Mathias

  2. Mahlzeit lesliejul,

    Auf meiner Seite habe ich ein Menü mit verschieden vielen Unterpunkten.

    Sinnvollerweise sollte ein in Baumstruktur aufgebautes Menü (und nichts anderes ist ein Menü, das mehrere Menüpunkte enthält, die wiederum beliebig viele Untermenüpunkte enthalten können, die wiederum ...) in HTML als eine http://de.selfhtml.org/html/text/listen.htm@title=Liste ausgezeichnet werden. Davon ist in Deinem Quälkot nichts zu sehen. Korrigiere das bitte als erstes (achte dabei insbesondere darauf, dass <ul> lediglich <li> enthalten dürfen - nichts anderes!) ... vorher ist jeder "Lösungsversuch" nicht sinnvoll!

    Diese sollen bei Klick auf den dazu gehörigen Menüpunkt eingeblendet werden und bei Klick auf einen anderen Menüpunkt wieder ausgeblendet werden. Ist ein Unterpunkt ausgewählt sollen die Unterpunkte dieses Bereichs eingeblendet bleiben.

    Das heißt, wenn ein Untermenüpunkt von Menüpunkt 2 ausgewählt ist, und ich auf Menüpunkte 1 klicke, soll Menüpunkt 2 trotzdem eingeblendet bleiben?

    Mein javascript schaut wie folgt aus:

    Hast Du die Javascript-Fehlerkonsole Deines Browser konsultiert? Diese müsste Dir mindestens einen Fehler anzeigen ...

    function punkt1 () {

    Statt mehrere Funktionen mit derartig - Entschuldigung! - idiotischen Namen zu verwenden, solltest Du vielleicht EINE [ref:self812;javascript/sprache/funktionen.htm@title=Funktion] definieren und diese einfach mit unterschiedlichen Argumenten aufrufen ...

    if (document.getElementById)
        document.getElementById("punkt1").style.display = "inline";
        document.getElementById("punkt2").style.display = "none";
        document.getElementById("punkt3").style.display = "none";
        document.getElementById("punkt4").style.display = "none";

    Dir ist schon klar, dass lediglich die erste Zuordnung in Abhängigkeit vom Vorhandensein von [code lang=javascript]document.getElementById()

      
    Übrigens: es gibt keinen aktuellen Browser (mehr), der diese Methode nicht kennt - die Überprüfung ist mehr oder weniger sinnfrei.  
      
      
    
    >   
    >   
    > function punkt2 () {  
      
    Irgendwie fehlt vor der Definition dieser Funktion die schließende geschweifte Klammer der vorherigen Funktion ...  
      
      
    
    > Der dazu gehöriger html-code:  
      
    Im Übrigen handelt es sich bei diesem Quälkot nicht um HTML- sondern PHP-Code. [Und Server-seitiger Code ist bei einem Client-seitigen Problem extrem irrelevant](http://community.de.selfhtml.org/zitatesammlung/zitat1353) ...  
      
      
    MfG,  
    EKKi  
    
    -- 
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    
  3. Hallo,

    Das funktioniert soweit auch. Ausgewählte Unterpunkte bleiben eingeblendet, bei Klick auf einen Menüpunkt werden dessen Unterpunkte eingeblendet und solange kein Unterpunkt ausgewählt ist blenden sich diese auch wieder richtig aus.. nur wenn ein Unterpunkt gewählt ist, werden nur darüber liegende Unterpunkte ausgeblendet, die darauf folgenden eingeblendeten Unterpunkte bleiben jedoch immer eingeblendet.

    Diese Fehlerbeschreibung kann ich nicht nachvollziehen.
    Wenn ich die fehlende schließende Klammer bei der punkt1-Funktion korrigiere, tut der Code, was er soll (sofern ich die Anforderungen verstanden habe). Tritt der Fehler immer noch auf, wenn du das korrigierst?

    Anstatt display auf 'inline' zu setzen, wäre
    document.getElementById("punktX").style.display = "block";
    angebrachter. Ansonsten steht bspw. punkt2 rechts neben dem punkt1-Linkblock, anstatt darunter. Absätze (p-Elemente) werden standardmäßig als Blockelemente dargestellt, nicht als Inline-Elemente.

    Mathias