[Javascript] Was ist an der Funktion falsch?

[quendolineDD]

Hallo DP :)

Ich hab hier eine Funktion, welche beim Klicken auf ein[*] ausgelöst wird. An die Funktion wird das geklickte[*] übergeben.

Dabei werden alle unter-li's angezeigt, oder wieder ausgeblendet, je nachdem was sie gerade sind. Nun wollte ich das ganze dahingehend erweitern, das alle anderen li's welche offen sind, ausgeblendet werden; sodass letzndlich immer nur ein Optionsmenu geöffnet ist. Vielleicht findet ihr den Wurm, ich hab schon etliche Varianten probiert und vom logischen her hätte es eigentlich schon längst gehen müssen ^^

Code:

function mShow(e)
{
   if (!e.getElementsByTagName)
      return;

   var subobj = e.getElementsByTagName('li');

   if (!subobj)
      return;

   for (j = 0; j < subobj.length; j++)
   {
      subobj[j].style.display = (subobj[j].style.display == 'block') ? 'none' : 'block';
   }
   
   var otherobj = document.getElementsByTagName('ul');
   var otherliobj = otherobj.getElementsByTagName('li');

   for (i = 0; i < otherliobj.length; i++)
   {
      otherliobj[i].style.display = 'block';
   }
}

Aufgerufen wird das ganze wie folgt:

Code:

<ul id="menu">
  <li id="opt1" class="show" onclick="mShow(this);">Options 1
    <ul>[*][url="#"]Item 1[/url][*][url="#"]Item 1[/url][*][url="#"]Item 1[/url][*][url="#"]Item 1[/url][/list]  

  <li id="opt2" onclick="mShow(this);">Options 2
    <ul>[*][url="#"]Item 2[/url][*][url="#"]Item 2[/url][*][url="#"]Item 2[/url][*][url="#"]Item 2[/url][/list]  

  <li id="opt3" onclick="mShow(this);">Options 3
    <ul>[*][url="#"]Item 3[/url][*][url="#"]Item 3[/url][*][url="#"]Item 3[/url][/list]  

  <li id="opt4" onclick="mShow(this);">Options 4
    <ul>[*][url="#"]Item 4[/url][*][url="#"]Item 4[/url][*][url="#"]Item 4[/url][*][url="#"]Item 4[/url][*][url="#"]Item 4[/url][/list]  [/list]

Es klappt hiermit ja nichtmal, alle li's wieder auszublenden ... ich versteh das nicht o.O

MfG

[Thorben77]

Warum blendest du die einzelnen Listeneinträge aus? Es ist einfacher gleich die ganze Liste auszublenden.

Ich hoffe mal, Folgendes löst dein Problem:

Code:

function mShow(e)
{
   if (!e.getElementsByTagName) {
      return;
   }
   
   // Alle Listen im Menü:
   var subLists = e.parentNode.getElementsByTagName("ul");
   
   // Erstmal alle Untermenüs ausblenden, die nicht zum geklickten Eintrag gehören:
   for (var i = 0; i < subLists.length; i++) {
      if (subLists[i].parentNode !== e) {
         subLists[i].style.display = "none";
      }
   }
   
   // Das Untermenü des geklickten Eintrags einblenden:
   e.getElementsByTagName("ul")[0].style.display = "block";
}

[quendolineDD]

Das blendet nun zwar alle aus, aber das geklickt Element wird nicht wieder angezeigt.

[Thorben77]

Hmm, du willst doch erreichen, dass nur die Items des Options-Eintrags eingeblendet werden, der angeklickt wird, oder?

[Florian H]

Was sagen denn Firedebug bzw. die JS-Fehlerkonsole (Opera / Firefox) dazu? Wenn was ernsthaft nicht stimmt, gibt das doch immer nützliche Fehlermeldungen...

[quendolineDD]

Nein, kommen keine Fehler. Danach habe ich schon geschaut.

Da muss was am Aufruf falsch sein, obwohl der eigentlich richtig ist o.O

Code:

function mShow(e)
{
   if (!e.getElementsByTagName) {
      return;
   }
   
   // Alle Listen im Menü:
   var subLists = e.parentNode.getElementsByTagName("ul");
   
   // Erstmal alle Untermenüs ausblenden, die nicht zum geklickten Eintrag gehören:
   for (var i = 0; i < subLists.length; i++) {
      if (subLists[i].parentNode !== e) {
         subLists[i].style.display = "none";
      }
   }
   
   // Das Untermenü des geklickten Eintrags einblenden:
   var obj = e.getElementsByTagName("ul");
   
   e.getElementsByTagName("ul")[0].style.display = "block";

   for (var i = 0; i < obj.length; i++) {
   obj[0].childNodes[i].style.display = "block";
   }
}
//-->

Selbst wenn ich auf die einzelnen Childnodes des UL zugreife kommt nichts anderes heraus ... auch tagName oder length geht nicht aufzurufen ...

Mmh, irgendwo lag da ein Fehler. Hab die Funktion nochmal umgeschrieben und bin die Struktur von oben nach unten nochmal gegangen ... so klappt es jetzt:

Code:

function mShow(e)
{
   if (!e.getElementsByTagName) {
      return;
   }
   
   // Alle Listen im Menü:
   var subLists = e.parentNode.getElementsByTagName("ul");
   
   // Erstmal alle Untermenüs ausblenden, die nicht zum geklickten Eintrag gehören:
   for (var i = 0; i < subLists.length; i++) {
      if (subLists[i].parentNode !== e) {
         subLists[i].style.display = "none";
      }
   }
   
   // Das Untermenü des geklickten Eintrags einblenden:
      var mnu    = document.getElementById('menu');
   var toplis = mnu.getElementsByTagName('li');

   for (var it = 0; it < toplis.length; it++)
   {
      var sublis = toplis[it].getElementsByTagName('li');

      for (var is = 0; is < sublis.length; is++)
         if (sublis[is].style)
            sublis[is].style.display = (toplis[it] == e) ? 'block' : 'none';
   }
}
//-->