[JS] Iemand enig idee wat de fout is?

[TheX]

Ik heb een stuk JS code geschreven die de werking heeft van een uitklapbare menu-structuur samengebracht in een table. Het idee is al veel gebruikt en heb ook al andere oplossingen gezien op GoT, maar vraag me toch af wat er hier nu mis gaat.

Als je de onderstaande code in een html bestand paste dan zul je zien dat de subsections netjes staan ingesprongen, maar zodra je deze in klapt, de mogelijkheid verdwijnt om dat deel weer uit te klappen. Het lijkt er dus op dat de "class" property van een subsection niet correct wordt veranderd.

Als iemand enig idee heeft wat er hier nu mis gaat hoor ik dat graag, ik zie het op het moment even niet meer...

HTML:

<style type="text/css">
  tbody.closed .details {display:none;}
  tbody.closed .link_hide {display:none;}
  tbody.opened .link_show {display:none;}
</style>

<script type="text/javascript">
  function setParentNodeClass(currentNode, nodeTag, cssClass)
  {
    nodeTag = nodeTag.toUpperCase();
    while(currentNode.tagName != nodeTag)
    {
      if(!currentNode.parentNode)
        return false;
      currentNode = currentNode.parentNode;
    }
    currentNode.className = cssClass;
    return false;
  }
</script>

<table>
  <tbody class="closed">
    <tr>
      <td>Section 1</td>
      <td>
        <a class="link_hide" href="#HideDetails"
           onclick="return setParentNodeClass(this, 'tbody','closed');">Hide details</a>
        <a class="link_show" href="#ShowDetails"
           onclick="return setParentNodeClass(this, 'tbody','opened');">Show details</a>
      </td>
    </tr>
    <tr class="details">
    <td>&nbsp;</td>
    <td>
    <table>
    <tbody class="opened">
     <tr>   
       <td>SubSection 1</td>
       <td>
         <a class="link_hide" href="#HideDetails"
             onclick="return setParentNodeClass(this, 'tbody','closed');">Hide details</a>
         <a class="link_show" href="#ShowDetails"
             onclick="return setParentNodeClass(this, 'tbody','opened');">Show details</a>
       </td>
     </tr>
     <tr class="details"><td>&nbsp;</td><td>Details</td></tr>
     <tr class="details">
        <td>&nbsp;</td>
        <td>
        <table>
        <tbody class="opened">
         <tr>   
           <td>SubSubSection 1</td>
           <td>
             <a class="link_hide" href="#HideDetails"
                 onclick="return setParentNodeClass(this, 'tbody','closed');">Hide details</a>
             <a class="link_show" href="#ShowDetails"
                 onclick="return setParentNodeClass(this, 'tbody','opened');">Show details</a>
           </td>
         </tr>
         <tr class="details"><td>&nbsp;</td><td>Details</td></tr>
        </tbody>
        </table>
        </td>
        </tr>
    </tbody>
    </table>
    </td>
     </tr>
     <tr class="details">
    <td>&nbsp;</td>
    <td>
    <table>
    <tbody class="opened">
     <tr>   
       <td>SubSection 2</td>
       <td>
         <a class="link_hide" href="#HideDetails"
             onclick="return setParentNodeClass(this, 'tbody','closed');">Hide details</a>
         <a class="link_show" href="#ShowDetails"
             onclick="return setParentNodeClass(this, 'tbody','opened');">Show details</a>
       </td>
     </tr>
     <tr class="details"><td>&nbsp;</td><td>Details</td></tr>
    </tbody>
    </table>
    </td>
     </tr>
  </tbody>
</table>

edit:
Sry in verkeerde form, maar direct al verplaatst zag ik. Bedankt daarvoor en met 1 oog tv kijken en 1 oog juiste forum selecteren is blijkbaar moeilijker dan ik dacht

[ Voor 25% gewijzigd door TheX op 07-06-2005 22:00 ]

[NMe]

Javascript hoort in Webdesign & Graphics, evenals alle andere clientside zaken.

PW>>WG

[crisp]

Cascading Stylesheet:

  tbody.closed .link_hide {display:none;}
  tbody.opened .link_show {display:none;}

think about it:

code:

tbody.opened
  tr
    td
      tbody.closed
        tr
          td
            a.link_hide
            a.link_show

welke rules worden hier toegepast op de anchors?

[Verwijderd]

Je fout zit niet in de JS maar in de CSS

Cascading Stylesheet:

<style type="text/css">
  tbody.closed .details {display:none;}
  tbody.closed .link_hide {display:none;}
  tbody.opened .link_show {display:none;}
</style>

De spaties tussen .opened en .link_show betekenen niet 'parent of' maar 'ancestor of'. Dat betekent dus dat als er ook maar één ancestor van een link_show de class opened heeft, hij niet zichtbaar wordt. Voeg deze lijn toe en het werkt:

Cascading Stylesheet:

tbody.opened tbody.closed .link_show {display:inline;}

[crisp]

Verwijderd schreef op dinsdag 07 juni 2005 @ 23:44:
[...]
Voeg deze lijn toe en het werkt:

Cascading Stylesheet:

tbody.opened tbody.closed .link_show {display:inline;}

totdat je weer een level dieper gaat...

Nu alleen nog omzetten naar een mooie list-structuur

[ Voor 12% gewijzigd door crisp op 07-06-2005 23:48 ]