Michelle: Aufklapp-Text - Probleme im Safari

SELF-Forum

Aufklapp-Text - Probleme im Safari

Michelle
– Informationen zu den Bewertungsregeln

Hallo

Zuerst das Problem - am Schluss das Script ;-)

Ich hab ein Script gefunden, mit welchem man einen Text auf- und zuklappen kann. Das funktioniert soweit super. Sogar benützbar mit ausgeschaltetem JS (dann wird der Text aufgeklappt angezeigt).

ABER: im Safari kann ich einen Link innerhalb des aufgeklappten Textes nicht anklicken. Anstatt den Link zu öffnen klappt es einfach den Text zu. Bei den anderen Browsern ist das zwar innerhalb des Textes auch so, nicht aber bei einem Link im Text - dort wird die entsprechende Seite geöffnet.

Bitte postet ganz einfache Beschreibungen oder gleich Scripts falls ihr Lösungen habt. Ich hab versucht JS zu lernen - mir fehlt dazu aber definitiv ein Gen. Für mehr als "li" in "div" zu ändern reichts bei mir nicht. Vielen Dank für euere Hilfe und euer Verständnis!

Liebe Grüsse,
Michelle

<html>
<head>
<script language="JavaScript">
  /*
   * Fügt den Listeneinträgen Eventhandler und CSS Klassen hinzu,
   * um die Menüpunkte am Anfang zu schließen.
   *
   * menu: Referenz auf die Liste.
   * data: String, der die Nummern aufgeklappter Menüpunkte enth&auml;lt.
   */
  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("p").length
            + items[i].getElementsByTagName("p").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();
      }
    }
  }

/*
   * &Auml;ndert die Klasse eines angeclickten Listenelements, sodass
   * ge&ouml;ffnete Menüpunkte geschlossen und geschlossene ge&ouml;ffnet
   * werden.
   *
   * event: Das Event Objekt, dass der Browser übergibt.
   */
  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);
    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(" ");
  }

/*
   * Gibt alle Klassen zurück, die einem HTML-Element zugeordnet sind.
   *
   * element: Das HTML-Element
   * return: Die zugeordneten Klassen.
   */
  function treeMenu_getClasses(element) {
    if(element.className) {
      return element.className.match(/[^ \t\n\r]+/g);
    }
    else {
      return new Array(0);
    }
  }

/*
   * Überprüft, ob ein Array ein bestimmtes Element enth&auml;lt.
   *
   * array: Das Array
   * element: Das Element
   * return: true, wenn das Array das Element enth&auml;lt.
   */
  function treeMenu_contains(array, element) {
    for(var i = 0; i < array.length; i++) {
      if(array[i] == element) {
        return true;
      }
    }
    return false;
  }

/*
   * Gibt einen String zurück, indem die Nummern aller ge&ouml;ffneten
   * Menüpunkte stehen.
   *
   * menu: Referenz auf die Liste
   * return: Der String
   */
  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(" ");
  }
</script>
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: black;}
ul#klappauf {margin:0;}
li.stufe1 {margin:0;}
p.stufe2 {margin:0;}
.link {color: red; text-decoration: underline; cursor:pointer;}
li.treeMenu_opened p {display: block;}
li.treeMenu_closed p {display: none;}
</style>
</head>

<body onload="treeMenu_init(document.getElementById('klappauf'), unescape(window.name).split(',')[0]); treeMenu_init(document.getElementById('text'), unescape(window.name).split(',')[1])" onunload="window.name = escape(treeMenu_store(document.getElementById('klappauf')) + ',' + treeMenu_store(document.getElementById('text')))">
Bla bla bla.....
<ul id="klappauf">
 <li id="text" class="stufe1"><span class="link">weitere Infos</span>
   <p class="stufe2">Bla bla bla... <a href="http://de.selfhtml.org/" target="_blank">link</a><br />
   <span class="link">schliessen</span></p>
 </li>
</ul>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln