dicon: JS/AJAX und DOM - style.display im IE 6 macht nicht was er soll

Beitrag lesen

Moin community...

folgende Problemstellung:

unter diesem Link findet ihr den Anfang eines Projektes... http://www.embla.de/_lk76Z7hh55/

Bitte mal oben links einen Link klicken / ein Fenster öffnen. Im Fenster dann oben einen
Menüpunkt öffnen. Sowohl im FF als auch im IE (bei mir 6) klappt das Menü auf (zweite Menüebene
bitte ignorieren, soweit bin ich noch nicht.)

Ein erneuter klick auf den Menüpunkt sollte das ganze wieder schließen... wieder öffnen...
schließen... usw. FF alles fein. Im IE 6 bleib das Menü stehen - Warum?

Wie entsteht das Menü?... Während sich das Fenster öffnet wird via httpRequest die Menüzeile
durch ein PHP-Script (muss sein, da später alle Menüs/Submenüs aus einer MSQL dynamisch erstellt
werden) generiert und als Tabelle, die in ein neues DIV gekapselt ist, in die DOM-Struktur
eingebunden. Die Submenüs entstehen auf dem gleichen Weg.
Der Code für Menüs werden als komplette "Seite" eingebunden, beginnend mit <!DOCTYPE... und
endend mit </html>, alle externen CSS und JS sind entsprechend Deklaration enthalten.

Für das auf- und zuklappen der Menüs ist folgende JS-Funktion zuständig:

/* =========== snip begin =========== */

1 evtShowMenu = function(e){
2    var menu = getEventTarget(e);
3    var mId  = (e.target)? e.target.id : e.srcElement.id;
4
5    if(!mId) {
6       window.alert('Fehler - evtShowMenu: Event-Element nicht vorhanden.');
7    } else {
8      var m   = setMenuLev(mId);                   // erzeugt Id Folge-Menu
9      var isM = document.getElementById(m);        // ermittelt Folge-Menu
10
11      if (!isM) {                                  // prüft, ob Folge-Menu im DOM vorhanden
12          getAjaxData(mId);                        // wenn nein, erzeuge Folge-Menu
13      } else if (isM.style.display == 'none') {
14          isM.style.display = 'block';             // wenn ja und unsichtbar, mache sichtbar
15      } else if (isM.style.display == 'block') {
16          isM.style.display = 'none';              // wenn ja und sichtbar, mache unsichtbar
17          isM.style.border = 'solid 1px';          // nur zur Kontrolle für IE 6
18      } else {
19          window.alert('Fehler - evtShowMenu: Problem mit style.display .');
20      }
30   }
31 }

/* =========== snip end =========== */

Zeile 2 und 3: übernehmen das Eventobjekt vom Listener

Das Script läuft auch im IE 6 ohne Fehlermeldungen durch. Wenn Ihr das Menu schließt... öffnet,
schließt... seht ihr oben links neben dem Ausklapper eine dünne schwarze Linie (generiert in Zeile 17),
die tut was sie soll, nämlich erscheinen und verschwinden - nur eben der Ausklapper nicht.

Folgende Dinge habe ich ohne Ergebnis probiert:

a) Zeile 13 bis 18 in eine separate Funktion ausgelagert und durch window.setTimeout('func', 1000) ersetzt
   Hintergrund: vielleicht braucht der IE ja 'n bisschen, bis er versteht, was er machen soll

b) Zeile 13 bis 18 durch einen Funktionsaufruf ersetzt, der via removeChild das komplette Menü wieder
   aus dem DOM entfernt

c) document.all-Methode

Bleibt vielleicht noch zu erwähnen, dass es im IE 7 funktioniert. Leider muss ich bis IE 6 abwärtskompatibel
bleiben. Ich habe leider überhaupt keinen Plan, wo's klemmt - eventuell ja jemand von Euch

Vielleicht noch was: Ich beginne grad erst zu verstehen wie JS + DOM funktioniert und versuche es umzusetzen,
bewusst ohne auf fertige Sachen zurückzugreifen - etwas Nachsicht bitte, wenn der Code amateurhaft ist.

Grüße und Danke, dicon