Gibt es hier eine Möglichkeit?

[Rolf]

Guten Abend zusammen!

Ich habe mir eine Navigation erstellt, bei der sich durch Klick auf ein Haupmenü-Eintrag, ein Untermenü öffnet. Auf- und einklappen funktioniert tadellos. Ich würde es aber gerne realisieren, dass wenn ich irgend ein Untermenü öffne, sich das vorher geöffnete automatisch schliesst. Ist dies machbar? (Ich bin nicht gerade Sattelfest in JavaScript und Google konnte mir nicht weiterhelfen)

Bei deaktiviertem JavaScript, ist im übrigen einfach der ganze Verzeichnisbaum sichtbar.

Hier der Verzeichnisbaum:

<div id="navigation">  
  
<ul class="main_menue">  
  
    <li class="main_menue">Startseite</li>  
  
    <li class="main_menue">  
    <a href="/" onclick="toggle('mannschaften');return false"><span class="year">Mannschaften</span></a>  
        <ul id="mannschaften">  
            <li>Herren 1</li>  
            <li>Frauen 1</li>  
            <li>Herren 2</li>  
            <li>Frauen 2</li>  
            <li>M-U19</li>  
            <li>F-U19</li>  
            <li>M-U17</li>  
            <li>F-U15</li>  
            <li>U13</li>  
            <li>U9 / U11</li>  
        </ul>  
    </li>  
  
    <li class="main_menue">  
    <a href="/" onclick="toggle('handballriege');return false"><span class="year">Handballriege</span></a>  
        <ul id="handballriege">  
            <li>Vorstand</li>  
            <li>Leitbild</li>  
            <li>Hallen</li>  
            <li>Fan Ecke</li>  
            <li>Schiedsrichter</li>  
            <li>Funktion&auml;re</li>  
            <li>Chronik</li>  
            <li>Mitgliedschaft</li>  
            <li>Ehrenmitglieder</li>  
        </ul>  
    </li>  
  
    <li class="main_menue">Agenda</li>  
    <li class="main_menue">Berichte</li>  
  
    <li class="main_menue">  
    <a href="/" onclick="toggle('events');return false"><span class="year">Events</span></a>  
        <ul id="events">  
            <li>Sch&uuml;lerturnier</li>  
            <li>Kost&uuml;mball</li>  
            <li>Sommerlager</li>  
        </ul>  
    </li>  
  
    <li class="main_menue">Sponsoring</li>  
  
    <li class="main_menue">  
    <a href="/" onclick="toggle('services');return false"><span class="year">Services</span></a>  
        <ul id="services">  
            <li>G&auml;stebuch</li>  
            <li>Fotogalerie</li>  
            <li>Weblinks</li>  
            <li>Downloads</li>  
        </ul>  
    </li>  
  
    <li class="main_menue">Kontakt</li>  
</ul>  
  
    <script type="text/javascript">  
        toggle('mannschaften');  
         toggle('handballriege');  
          toggle('events');  
           toggle('services');  
    </script>  
  
</div>

Und hier das Script:

  function toggle(layerId){  
  
  
    try{  
      var layer = document.getElementById(layerId);  
      layer.isDisplayed=!layer.isDisplayed;  
      if(layer.isDisplayed){  
        hide(layerId);  
      } else {  
        display(layerId);  
      }  
        } catch (ex){  
    }  
  }  
  
  function hide(  layerId){  
    try{  
      document.getElementById(layerId).style.display="none";  
    } catch (ex){  
    }  
  }  
  
  function display( /* String */  layerId ){  
    try{  
      document.getElementById(layerId).style.display="block";  
    } catch (ex){  
    }  
  }

Ich danke Euch allen für mögliche Anregungen und wünsche noch einen schönen Abend.

Gruss Rolf

[ChrisB]

Hi,

Ich würde es aber gerne realisieren, dass wenn ich irgend ein Untermenü öffne, sich das vorher geöffnete automatisch schliesst. Ist dies machbar?

Klar. "Merke" dir in einer Variablen die Referenz auf das Element, welches zuvor aufgeklappt wurde - und schliesse es dann beim Aufklappen eines neuen.

Pseudocode:

var momentanOffen = null;  
  
funktion aufklappen(element) {  
  if(momentanOffen) { // wenn es ein momentan geöffnetes Element gibt  
    mach_zu(momentanAufgeklappt); // mache es zu  
  }  
  mach_auf(element); // aktuelles Element aufklappen  
  momentanOffen = element; // eben geöffnetes Element als offenes merken  
}

Btw: Bitte wähle das nächste Mal einen Titel, der kurz umreisst, was du vorhast - der von dir gewählte war ziemlich nichtssagend.

MfG ChrisB

[Rolf]

Hallo Chris

Das mit dem Titel werde ich mir merken.

Und Danke für Deine Hilfe!

Gruss Rolf

[nemoinho]

Hallo Rolf,

mir fällt an deinem Problem auch noch auf, dass es teils sehr unübersichtlich ist, außerdem ist das verwendete javascript irgendwie ziemlich umständlich, vor allem mit den try-except kontrollen, daher hab ich mal kurz deinen code soweit gesäubert, wie ich es spontan für gut hielt, und dir eine js-funktion geschrieben, die schneller und kleiner ist,
hier erstmal das html (etwas gekürzt):

<div id="navigation">  
  <ul class="main_menu">  
    <li class="main_menu"><a href="#startseite">Startseite</a></li>  
    <li class="main_menu"><a href="#mannschaften">Mannschaften</a>  
      <ul>  
        <li>Herren 1</li>  
        <li>...</li>  
      </ul>  
    </li>  
    <li class="main_menu"><a href="#handballriege">Handballriege</a>  
      <ul>  
        <li>Vorstand</li>  
        <li>...</li>  
      </ul>  
    </li>  
    <li class="main_menu"><a href="#agenda">Agenda</a></li>  
    <li class="main_menu"><a href="#berichte">Berichte</a></li>  
    <li class="main_menu"><a href="#events">Events</a>  
      <ul>  
        <li>Schülerturnier</li>  
        <li>...</li>  
      </ul>  
    </li>  
    <li class="main_menu"><a href="#sponsoring">Sponsoring</a></li>  
    <li class="main_menu"><a href="#services">Services</a>  
      <ul>  
        <li>Gästebuch</li>  
        <li>...</li>  
      </ul>  
    </li>  
    <li class="main_menu"><a href="#kontakt">Kontakt</a></li>  
  </ul>  
  <script type="text/javascript">  
  menu();  
  </script>  
</div>

und dann dazu noch die js-funktion, die das alles steuert:

function menu(){  
    var li = document.getElementById('navigation').getElementsByTagName('li'), i = li.length, sub, active = null;  
    for(;i--;)  
        if((sub = li[i].getElementsByTagName('ul')[0]) != undefined){  
            sub.style.display = 'none';  
            li[i].onclick = function(){  
                if(active) active.style.display = 'none';  
                var tmp = this.getElementsByTagName('ul')[0];  
                tmp.style.display = '';  
                active = tmp;  
                return false;  
            };  
        }  
};

Übrigens kannst du die umlaute auch ruhig ausschreiben, heutzutage sollte es da eigentlich keine großen probleme mehr geben, wenn man das dokument korrekt abspeichert und im head den charset angibt, in welchem das dokument angezeigt werden soll:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

und somit tschüss

[Rolf]

Hallo nemoinho

Das ist jetzt aber der Hammer! Ich komme von ein paar Tagen Urlaub zurück und will mich gerade an das Problem mit der Navigation setzen, als ich mehr oder weniger aus Neugierde nochmals kurz ins Forum schaue.

Jetzt noch eine Antwort zu erhalten und erst noch eine, die die perfekte Lösung auf mein Problem zu sein scheint, hätte ich nicht erwartet.

Deshalb hier noch verspätet, meinen besten Dank für Deine Hilfe. Da ich nun dem nicht mehr nachgehen muss, bleibt mir doch glatt noch ein Tag Urlaub mehr!

Gruss Rolf