Exercice HTML: Arbre Menu

Facebook Tweet Pin Email

<html>
<head>
<title>Exemple</title>
<script type="text/javascript">
  function treeMenu_init(menu, data) {
    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();
        }
      }
    }
  }
  function treeMenu_handleClick(event) {
    if(event == null) { //solution de rechange pour les propriétés DOM faisant défaut dans l'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);
    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(" ");
  }

  /*
   * Renvoie toutes les classes affectées à un élément HTML
   *
   * element: l'élément HTML
   * return: les classes affectées
   */
  function treeMenu_getClasses(element) {
    if(element.className) {
      return element.className.match(/[^ \t\n\r]+/g);
    }
    else {
      return new Array(0);
    }
  }

  /*
   * Vérifie si un tableau contient un élément déterminé.
   * array: le tableau
   * element: l'élément
   * return: true, si le tableau contient l'élément.
   */
  function treeMenu_contains(array, element) {
    for(var i = 0; i < array.length; i++) {
      if(array[i] == element) {
        return true;
      }
    }
    return false;
  }

  /*
   * Renvoie une chaîne de caractères dans laquelle figurent tous les
   * points du menu ouverts.
   *
   * menu: référence à la liste
   * return: la chaîne de caractères
   */
  function treeMenu_store(menu) {
    var result = new Array();;
    var items = menu.getElementsByTagName("li");
    for(var i = 0; i < items.length; i++) {
      if(treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")) {
        result.push(i);
      }
    }
    return result.join(" ");
  }

<style type="text/css">
  li.treeMenu_opened ul {
    display: block;
  }
  li.treeMenu_closed ul {
    display: none;
  }
</style>
<body onload="treeMenu_init(document.getElementById('menu'), '')">
<ul id="menu">
  <li>Premièrement
    <ul>
      <li>A</li>
      <li>B</li>
    </ul>
  </li>
  <li>Deuxièmement
    <ul>
      <li>a</li>
      <li>b</li>
    </ul>
  </li>
</ul>
</body>
</html>

Pages 1 2