[JS] in/uitklappen werkt niet helemaal lekker

[kleautviool]

Zoals de titel al zegt, het in- en uitklappen van mijn menu wil niet helemaal werken.
Ik heb nu op onderstaande manier een menustructuur.

HTML:

<ul>
  <li><a onclick="showNextParent(this)"></a>
    <ul>
      <li>Meuk</li>
      <li>Meuk</li>
    </ul>
  </li>
  <li><a onclick="showNextParent(this)"></a></li>
    <ul>
      <li>Meuk</li>
      <li>Meuk</li>
    </ul>
  </li>
</ul>

Als je dus nu op een link met een onclick event-handler klikt, moet de onderliggende <ul> tevoorschijn komen áls deze nog niet zichtbaar is. Is deze al wél zichtbaar is, moet de onderloggende <ul> weer weggaan.
Nu heb ik dit op de volgende manier vgeprobeert:

JavaScript:

function showNextParent(startNode) {
 var menuObj = startNode.parentNode, i;
 for (i=0; i<menuObj.childNodes.length; i++) {
  var node = menuObj.childNodes.item(i);
  if(node.nodeName == "UL") {
   if(node.style.display == "none") {
    node.style.display = "block";
   } else {
    node.style.display = "none";
   }
  }
 }
}

Alleen werkt dit niet. Als ik nu het volgende probeer:

JavaScript:

function showNextParent(startNode) {
 var menuObj = startNode.parentNode, i;
 for (i=0; i<menuObj.childNodes.length; i++) {
  var node = menuObj.childNodes.item(i);
  if(node.nodeName == "UL") {
   node.style.display = "block";
  }
 }
}

Dan wordt de onderliggende <ul> goed weergegeven. Dus leek het mij logisch die if/else constructie erin te doen om te kijken of de onderliggende <ul> niet al op display: block staat. Dit om het menu'tje ook weer in te laten klappen, maar dat werkt dus niet.
Dus mijn vraag is nu, wáárom dit niet werkt, en of iemand weet hoe ik dit wel werkend kan krijgen?

P.S. Ik weet dat je zo'n menu ook in CSS kan fixxen, maar doe het nu even in JS

[crisp]

style.display is pas opvraagbaar op het moment dat hij ook daadwerkelijk gezet is, ofwel dmv een inline style of door scripting. Een eerste afvraging levert dus altijd niets op.
De vraag is dan ook of de UL initieel wel of niet zichtbaar is, daarop moet je je if-else aanpassen.

[kleautviool]

Vergeten te melden idd, maar via een externe stylesheet heb ik alle <ul> die onder een <li> komt op display: none; gezet. Maar dit is dus niet opvraagbaar......
Hoe zou ik mijn if/else dan moeten aanpassen?

[crisp]

Dan zou dit moeten werken:

JavaScript:

function showNextParent(startNode) {
 var menuObj = startNode.parentNode, i;
 for (i=0; i<menuObj.childNodes.length; i++) {
  var node = menuObj.childNodes.item(i);
  if(node.nodeName == "UL") {
   if(node.style.display == "block") {
    node.style.display = "none";
   } else {
    node.style.display = "block";
   }
    break;
  }
 }
}