Internet Explorer führt open/close Script falsch aus

[Invisibly85]

Hallo,

ich bin dabei eine hierarchische, baumstrukturartige Navigation zu erstellen. Der folgende (vereinfachte) Code ist das Resultat meiner Datenbankabfrage, doch leider funktioniert er im Internet Explorer nicht wie gewünscht, Opera und Mozilla machen hingegen keine Probleme.

Ich möchte, dass z.B. wie im Windows Explorer, erst einmal nur die oberste Ebene der Listenpunkte zu sehen ist und ein Klick auf einen dieser Listenpunkte den nächsten Unterpunkt öffnet. Das funktioniert soweit auch ganz gut, nur der Internet Explorer macht beim Klicken auf einen Unterpunkt die Liste wieder komplett zu. Mir scheint, als hätte er bei der Unterscheidung zwischen ID "1" und "11" oder "2" und "22" Probleme, oder aber die Ebenen überlagern sich.. ?!?

Bin echt ratlos. Ich muss dazu sagen, dass ich mit Listen erst sehr kurz arbeite.

<script type="text/javascript">  
function openclose(field)  
{  
  
if(document.getElementById(field).style.display == "block")  
{  
document.getElementById(field).style.display = "none";  
}  
else  
{  
document.getElementById(field).style.display = "block";  
}  
  
}  
</script>

  
<ul id='0' style='display:block; cursor:pointer;'>  
  <li onClick=openclose('1');>Test 1</li>  
	<ul id='1' style='display:none; cursor:pointer;'>  
    <li onClick=openclose('11');>Test 1.1</li>  
	  <ul id='11' style='display:none; cursor:pointer;'>  
      <li onClick=openclose('111');>Test 1.1.1</li>  
      <li onClick=openclose('113');>Test 1.1.3</li>  
		<ul id='113' style='display:none; cursor:pointer;'>  
        <li onClick=openclose('1131');>Test 1.1.3.1</li>  
        </ul>  
	  </ul>  
	</ul>  
  <li onClick=openclose('2');>Test 2</li>  
	<ul id='2' style='display:none; cursor:pointer;'>  
    <li onClick=openclose('21');>Test 2.1</li>  
    <li onClick=openclose('22');>Test 2.2</li>  
	  <ul id='22' style='display:none; cursor:pointer;'>  
      <li onClick=openclose('221');>Test 2.2.1</li>  
	    <ul id='221' style='display:none; cursor:pointer;'>  
        <li onClick=openclose('2211');>Test 2.2.1.1</li>  
        </ul>  
      </ul>  
    </ul>  
  <li onClick=openclose('3');>Test 3</li>  
	<ul id='3' style='display:none; cursor:pointer;'>  
    <li onClick=openclose('31');>Test 3.1</li>  
    </ul>  
  <li onClick=openclose('4');>Test 4</li>  
</ul>  
  

Ich hoffe ihr könnt mir weiterhelfen! Vielen Dank für eure Hilfe!

Grüße

Basti

[Der Martin]

Hi,

ich bin dabei eine hierarchische, baumstrukturartige Navigation zu erstellen. Der folgende (vereinfachte) Code ist das Resultat meiner Datenbankabfrage, doch leider funktioniert er im Internet Explorer nicht wie gewünscht, Opera und Mozilla machen hingegen keine Probleme.

das überrascht mich - sind die anderen Browser mal wieder fehlertoleranter als der IE? Doch, wirklich: In manchen Punkten verhält er sich korrekter als die Konkurrenz.

Mir scheint, als hätte er bei der Unterscheidung zwischen ID "1" und "11" oder "2" und "22" Probleme, oder aber die Ebenen überlagern sich.. ?!?

Vermutlich hat er eher mit den ungültigen IDs ein Problem: IDs dürfen nicht mit einer Ziffer beginnen.

<ul id='0' style='display:block; cursor:pointer;'>
  <li onClick=openclose('1');>Test 1</li>
  <ul id='1' style='display:none; cursor:pointer;'>
    <li onClick=openclose('11');>Test 1.1</li>
    <ul id='11' style='display:none; cursor:pointer;'>
[...]

Die Verschachtelung ist ebenfalls ungültig (invalid). Ein ul darf als Kindelemente nur li haben, deine untergeordneten Listen müssen also *innerhalb* eines li stehen.

Ciao,
 Martin

[Kai345]

[latex]Mae  govannen![/latex]

Mir scheint, als hätte er bei der Unterscheidung zwischen ID "1" und "11" oder "2" und "22" Probleme,

IDs wie 1 11 2 oder 22 sind ungültig. Id-Attribut

Vielleicht ist IE hier ( ausnahmsweise )mal korrekt

Cü,

Kai

[Felix Riesterer]

Lieber Basti,

Ich möchte, dass z.B. wie im Windows Explorer, erst einmal nur die oberste Ebene der Listenpunkte zu sehen ist und ein Klick auf einen dieser Listenpunkte den nächsten Unterpunkt öffnet.

vielleicht hilft Dir ja mein Explorer-Script, das ich z.B. bei dieser Download-Seite einsetze?

Liebe Grüße,

Felix Riesterer.

[Invisiblyy85]

Hallo,

vielen Dank für eure ersten Antworten. Ich habe die Tips umgesetzt, doch leider funktioniert es jetzt in keinem Browser mehr. Es liegt also ein grundsätzlicher Fehler in meinem Code vor.

Aufschluss darüber gibt das in der JS-Funktion eingebaute "alert(field);". Sobald man auf Punkt "Test 1" klickt, meldet das alert "cat1", was korrekt ist. Klickt man dann auf "Test 1.1" meldet das alert erst "cat11" <- korrekt, dann aber nochmal "cat1" <- nicht korrekt, was zur Schließung der oberen Ebene führt.

Grüße

Basti

  
<script type="text/javascript">  
function openclose(field)  
{  
  
alert(field);  
  
	if(document.getElementById(field))  
	{  
		if(document.getElementById(field).style.display == "block") { document.getElementById(field).style.display = "none"; }  
		else { document.getElementById(field).style.display = "block"; }  
	}  
  
}  
</script>  

  
<ul id='cat0' style='display:block; cursor:pointer;'>  
<li onClick=openclose('cat1');>Test 1  
	  
	<ul id='cat1' style='display:none; cursor:pointer;'>  
	<li onClick=openclose('cat11');>Test 1.1  
		  
		<ul id='cat11' style='display:none; cursor:pointer;'>  
		<li onClick=openclose('cat111');>Test 1.1.1  
		  
			<ul id='cat111' style='display:none; cursor:pointer;'>  
			<li onClick=openclose('cat1111');>Test 1.1.1.1</li>  
			<li onClick=openclose('cat1112');>Test 1.1.1.2</li>  
			</ul>  
		  
		</li>  
		<li onClick=openclose('cat112');>Test 1.1.2</li>  
		</ul>  
		  
	</li>  
	</ul>  
</li>  
<li onClick=openclose('cat2');>Test 2</li>	  
<li onClick=openclose('cat3');>Test 3</li>  
<li onClick=openclose('cat4');>Test 4  
  
	<ul id='cat4' style='display:none; cursor:pointer;'>  
	<li onClick=openclose('cat41');>Test 4.1  
  
		<ul id='cat41' style='display:none; cursor:pointer;'>  
		<li onClick=openclose('cat411');>Test 4.1.1</li>  
		</ul>  
	  
	</li>  
	  
	<li onClick=openclose('cat42');>Test 4.2</li>  
  
</li>  
</ul>  

[ChrisB]

Hi,

Aufschluss darüber gibt das in der JS-Funktion eingebaute "alert(field);". Sobald man auf Punkt "Test 1" klickt, meldet das alert "cat1", was korrekt ist. Klickt man dann auf "Test 1.1" meldet das alert erst "cat11" <- korrekt, dann aber nochmal "cat1" <- nicht korrekt

Doch, auch korrekt - weil Events wie onclick bubblen, d.h. nach oben im DOM aufsteigen, so lange du dies nicht explizit unterbindest.

Am einfachsten zu unterbinden, in dem du aus der Eventbehandlung heraus false zurück gibst.

MfG ChrisB

[invisibly85]

Funktioniert leider mit der Rückgabe von false auch nicht. Er ruft die Funktion scheinbar 2x hintereinander auf.

MFG

Basti

[ChrisB]

Hi,

Funktioniert leider mit der Rückgabe von false auch nicht.

"Funktioniert nicht" funktioniert nicht.

Er ruft die Funktion scheinbar 2x hintereinander auf.

Nicht "scheinbar", sondern ganz sicher, wenn du das Bubbling nicht unterbindest - muss ja auch so sein.

MfG ChrisB