Event-Handling, Ein-/Ausschalten von Listen...

[Oliver E.]

Hallo Liebes Forum und Mitlesende,

ich habe ein (Verständnis-)Problem mit den Auswirkungen einer Funktion.

HTML-Schnipsel:

  
  <aside>  
    <nav>  
      <ul id="navi_touch">  
        <li>NAVIGATION:</li>  
      </ul>  
      <ul class="navigation">  
        <li><a href="#">Text</a></li>  
        <li><a href="#">Text</a></li>  
      </ul>  
      <ul class="navigation">  
        <li><a href="#">Text</a></li>  
        <li><a href="#">Text</a></li>  
      </ul>  
      <ul class="navigation">  
        <li><a href="#">Text</a></li>  
      </ul>  
    </nav>  
</aside>  

Die 3 Listen mit der Klasse "navigation" werden mittels document.getElementsByClassName selektiert und sollen beim "Klick" auf die Liste (mit der ID navi_touch) ein- bzw. ausgeblendet werden.

Beim Laden der Seite werden die Listen vorab ausgeschaltet, so dass der erste Klick das Einschalten bewirken soll.

Das betreffende CSS dazu:

.navigation  
{  
  display: block;  
}  
  
.aus  
{  
display: none;  
}

Das JavaScript dazu:

  
window.addEventListener("load", start, false);  
  
function start()  
{  
	  
/*	Nach dem Laden der Seite wird die Navigation ausgeblendet*/  
	var navi_elemente = document.getElementsByClassName('navigation');  
	var anzahl = navi_elemente.length;  
	for(i = 0; i < anzahl; i++)  
		{  
			document.getElementsByClassName('navigation')[0].className = "aus";  
		}  
	/*Anschließend werden die Event-Handler zum Ein- und Ausblenden der Navigation eingebunden*/  
	var naviElement = document.getElementById('navi_touch');  
	naviElement.addEventListener("click", navi_ein, false);  
	naviElement.addEventListener("click", navi_aus, false);  
}  
  
  
function navi_ein()  
{  
	var navi_elemente = document.getElementsByClassName('aus');  
	var anzahl = navi_elemente.length;  
	for(i = 0; i < anzahl; i++)  
		{  
			document.getElementsByClassName('aus')[0].className = "navigation";  
		}  
}  
  
function navi_aus()  
{  
	var navi_elemente = document.getElementsByClassName('navigation');  
	var anzahl = navi_elemente.length;  
	for(i = 0; i < anzahl; i++)  
		{  
			document.getElementsByClassName('navigation')[0].className = "aus";  
		}  
}  

Das Ausblenden beim Start (geladen) der Seite "works as intended" in den Browwsern (IE, Chrome, FF).

Jetzt das Problem. Sobald ich/man auf die Liste zum Einblenden klickt wird die Funktion "navi_ein" ausgeführt, abgearbeitet und die Listen eingeblendet --- ABER sobald die Funktion fertig ist, wird der ursprüngliche Zustand wieder hergestellt und die Listen sind wieder ausgeblendet. (Schleifendurchlauf mit Firebug peu a peu getestet).

Warum ist das so bzw. wieso verhält sich JavaScript so? Und wie kann ich das Problem beheben?

P.s.

• Das Ausblenden vorab kommt nur beim Einsatz von kleinen Endgeräten zum Einsatz
• JQuery Einsatz ist nicht gewollt

Lieben Gruß und Danke für Eure Zeit

Oliver