[JavaScript] Menü aufklappbar und zuklappbar machen

Drucken
( 2 Votes )
Hauptkategorie: Programmieren Kategorie: JavaScript
Erstellt am 29.08.2012 Zuletzt aktualisiert am 29.08.2012 Geschrieben von Jonny132
Vielmal sieht man im Internet Menüs bzw Listen die aufklappbar (expandable) bzw. zuklappbar (collapsable) sind.
Wie man so etwas selber mit JavaScript implementieren kann, zeige ich euch in diesem Tutorial.

Hier könnt ihr euch das Ergebnis des Tutorials schonmal ansehen.

Benötigt werden folgende Dateien:
  • menueaufklappenzuklappen.html
  • menueaufklappenzuklappen.js
  • expand.png
  • collapse.png

Bearbeiten wir zuerst die HTML - Datei.
In dessen Header fügen wir einen Link bzw eine Script definition zu unserer JS - Datei und ein Style-Tag ein in der wir auf unsere Bilder verweisen (Diese werden bei einem Klick ausgetauscht wie man es vom Windowsexplorer kennt).

Head Definition:

  <script src="/./menueaufklappenzuklappen.js" type="text/javascript"></script>

  <style>
   .toggleexpand
   {
     background-image: url(/expand.png);
     background-repeat: no-repeat;
     padding-left:25px;
     background-position: center;
   }

   .togglecollapse
   {
     background-image: url(/collapse.png);
     background-repeat: no-repeat;
     padding-left:25px;
     background-position: center;
   }
  </style>
Im Body Teil erstellen wir nun eine ganz normale Liste mit Einträgen und Untereinträgen welche wiederum Untereinträge enthalten.
Bei jedem Element, das auf- bzw. zuklappbar sein soll, führen wir im onclick-Event die ToggleMenu-Funktion der JavaScript - Datei aus (zu dieser Funktion kommen wir später), der wir das aktuelle Element (also den A-Tag) mittels 'this'-Schlüsselwort übergeben.

Body - Definition:
<ul>
<li>
  <a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
  Eintrag 1
  <ul>
    <li>
      <a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
      Eintrag 1.1
      <ul>
        <li>Eintrag 1.1.1</li>
        <li>Eintrag 1.1.2</li>
        <li>Eintrag 1.1.3</li>
      </ul>
     </li>
    <li>
      <a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
      Eintrag 1.2
      <ul>
        <li>Eintrag 1.2.1</li>
        <li>Eintrag 1.2.2</li>
        <li>Eintrag 1.2.3</li>
      </ul>
     </li>
    <li>
      <a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
      Eintrag 1.3
      <ul>
        <li>Eintrag 1.3.1</li>
        <li>Eintrag 1.3.2</li>
        <li>Eintrag 1.3.3</li>
      </ul>
     </li>
  </ul>
</li>
<li>
  <a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
  Eintrag 2
  <ul>
    <li>
      <a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
      Eintrag 2.1
      <ul>
        <li>Eintrag 2.1.1</li>
        <li>Eintrag 2.1.2</li>
        <li>Eintrag 2.1.3</li>
      </ul>
     </li>
    <li>
      <a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
      Eintrag 2.2
      <ul>
        <li>Eintrag 2.2.1</li>
        <li>Eintrag 2.2.2</li>
        <li>Eintrag 2.2.3</li>
      </ul>
     </li>
    <li>
      <a href="javascript:void(0);" class="togglecollapse" onclick="ToggleMenu(this);"></a>
      Eintrag 2.3
      <ul>
        <li>Eintrag 2.3.1</li>
        <li>Eintrag 2.3.2</li>
        <li>Eintrag 2.3.3</li>
      </ul>
     </li>
  </ul>
</li>
</ul>
ToggleMenu - Funktion in der JavaScript - Datei:
function ToggleMenu(element)
{
  var content = element.parentNode; 
  var hide = element.className == 'togglecollapse';
  for(i=0;i<content.childNodes.length;i++)
  { 
    var child = content.childNodes[i];
    if(child.tagName == 'UL')
    {
      for(j=0;j<child.childNodes.length;j++)
      {
        var childchild = child.childNodes[j];
        if(hide)
        { 
          childchild.style.display = 'none'; 
          element.className = 'toggleexpand';
        } 
        else
        { 
          childchild.style.display = 'block';
          element.className = 'togglecollapse';
        }
      }
    }
  }
}
Wie vorhin gesagt wird das A-Element auf das geklickt wurde übergeben. Mittels parentNode holen wir uns das Vaterelement des Links in die Variable 'content'.
In die Variable 'hide', speichern wir, ob der Inhalt angezeigt werden soll oder nicht. Dies lösen wir einfach indem wir den aktuellen className des Listeneintrags überprüfen.
Dann wird über alle childNodes des Listeneintrags iteriert. Ist der das child ein UL-Element, so iterieren wir wiederum über dessen Kinder.
Je nachdem, ob die Elemente versteckt oder angezeigt werden sollen, setzten wir den display-Style der Elemente wobei 'none' für nicht Sichtbar steht und 'block' für Sichtbar.

Hier könnt ihr es euch anschauen.      

 

    Veröffentlichen Sie ihre Kommentare ...