aufklappbares CSS Menü

[Daniel Thoma]

Hallo Sabrina,

Ja die gibt es, da ich das öffters gefragt werde, werde ich den Artikel wohl irgendwann mal ergänzen. Ich kopier Dir hier mal die letzte Antwort:

Bewerkstelligen lässt sich das Ganze durch eine Änderung an treeMenu_handleClick.
Die Funktion muss, wenn sie einen Menüeintrag öffnet, alle anderen Menüeinträge des selben Teilmenüs schließen, indem sie auf event.currenTarget.parentNode.childNodes zugreift.

Ich habe dieses verhalten in Abhängigkeit von einer CSS-Klasse implementiert. Gibt man bei einer Liste (ul/ol) die Klasse treeMenu_openSingleNode an, kann in diesem Teilmenü nur noch ein Eintrag geöffnet werden.
Die Funktion treeMenu_init habe ich mit einem dritten Parameter versehen.
Wenn man diesen auf true setzt, setzt die Funktion die Klasse automatisch für das ganze Menü.

Die angepassten Funktionen: (Änderungen markiert)

function treeMenu_init(menu, data, openSingleNode) {
  var array = new Array(0);
  if(data != null && data != "") {
    array = data.match(/\d+/g);
  }
  var items = menu.getElementsByTagName("li");
  for(var i = 0; i < items.length; i++) {
    items[i].onclick = treeMenu_handleClick;
    if(!treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")
        && items[i].getElementsByTagName("ul").length
          + items[i].getElementsByTagName("ol").length > 0) {
      var classes = treeMenu_getClasses(items[i]);
      if(array.length > 0 && array[0] == i) {
        classes.push("treeMenu_opened")
      }
      else {
        classes.push("treeMenu_closed")
      }
      items[i].className = classes.join(" ");
    }
    if(array.length > 0 && array[0] == i) {
      array.shift();
    }
// ANFANG
    if(openSingleNode) {
      var classes = treeMenu_getClasses(items[i].parentNode);
      if(!treeMenu_contains(classes, "treeMenu_openSingleNode")) {
        classes.push("treeMenu_openSingleNode");
        items[i].parentNode.className = classes.join(" ");
      }
    }
// ENDE
  }
}

function treeMenu_handleClick(event) {
  if(event == null) { //Workaround für die fehlenden DOM Eigenschaften im IE
    event = window.event;
    event.currentTarget = event.srcElement;
    while(event.currentTarget.nodeName.toLowerCase() != "li") {
      event.currentTarget = event.currentTarget.parentNode;
    }
    event.cancelBubble = true;
  }
  else {
    event.stopPropagation();
  }
  var array = treeMenu_getClasses(event.currentTarget);

// ANFANG

if(treeMenu_contains(treeMenu_getClasses(event.currentTarget.parentNode), "treeMenu_openSingleNode") && treeMenu_contains(array, "treeMenu_closed")) {
    for(var i = 0; i < event.currentTarget.parentNode.childNodes.length; i++) {
      var element = event.currentTarget.parentNode.childNodes[i];
      if(element.nodeName.toLowerCase() == "li" && element != event.currentTarget){
        var array2 = treeMenu_getClasses(element);
        for(var j = 0; j < array2.length; j++) {
          if(array2[j] == "treeMenu_opened") {
            array2[j] = "treeMenu_closed";
          }
        }
        element.className = array2.join(" ");
      }
    }
  }
// ENDE
  for(var i = 0; i < array.length; i++) {
    if(array[i] == "treeMenu_closed") {
      array[i] = "treeMenu_opened";
    }
    else if(array[i] == "treeMenu_opened") {
      array[i] = "treeMenu_closed"
    }
  }
  event.currentTarget.className = array.join(" ");
}

Grüße

Daniel