[dHTML] Simpel uitklapmenuutje, wat doe ik fout?

[r0bert]

JavaScript:

function fSwitch(oEl)
{
    for (var iInt = 0; iInt < oEl.childNodes.length; iInt++)
    {
        var oChild  = oEl.childNodes(iInt);

        if ((oChild.tagName) && (oChild.tagName.toLowerCase() == "dd"))
        {
            sDisplay = (oChild.style.display == "block") ? "none" : "block";

            oChild.style.display = sDisplay;
        }
    }
}

HTML:

<dl>
    <dt onClick="fSwitch(this);">Homepage
        <dd>Test1</dd>
        <dd>Test2</dd>
        <dd>Test3</dd>
    </dt>
</dl>

Hij zegt nu dat oEl maar 2 childNodes heeft (0 en 1), maar volgens mij horen alle DD's daar toch ook gewoon bij. Nu loopt hij de lus niet goed door en werkt het scriptje helemaal niet. Ik snap alleen niet wat ik fout doe, want oEl is toch echt wel het DT-element..

[SchizoDuckie]

je kan niet een <dd> nesten in een <dt>.... Je doet dus substantieel iets fout...

In m'n cv gebruik ik ook een soortelijk systeem, kijk maar even hoe dat werkt
(zie sig)

edit:

waarom maak je trouwens nog een aparte sDisplay var aan

code:

oChild.style.display  = (oChild.style.display == "block") ? "none" : "block";

is toch net zo netjes?

[ Voor 60% gewijzigd door SchizoDuckie op 21-10-2004 12:51 ]

[Verwijderd]

Inderdaad, en dat wordt dan door de browser gefixt (in Mozilla iig) door de dd direct weer te sluiten als er een dt aankomt.

[André]

Dus gewoon de DT afsluiten en de nextSiblings doorlopen tot de volgende DT

Maar een oplossing met een <ul> <li> combinatie lijkt me in dit geval makkelijker en wenselijker.

[ Voor 40% gewijzigd door André op 21-10-2004 13:23 ]

[crisp]

bedenk trouwens ook dat oChild.style.display in eerste instantie niet geset is

[r0bert]

@PapaEend: Oh, ok, dat zal dan idd belangrijke fout zijn.. beetje slordig van me En die extra var is om het wat overzichtelijk te houden. Als het werkt kan ik het nog altijd in elkaar gaan schuiven

@Martijn22: In IE dezelfde fout denk ik, want daarin werkt het ook niet, maar zal het aanpassen vanavond en dan kijken of ie het dan wel doet.

@André: Wat is het verschil tussen een dl en een ul dan? En ik wou ze juist graag nesten om de niveauverschillen aan te geven..

@Crisp: Dat maakt verder niet uit toch? Want oChild.style...etc.. zal dan false returnen..

[André]

r0bert schreef op 21 oktober 2004 @ 17:24:
@André: Wat is het verschil tussen een dl en een ul dan? En ik wou ze juist graag nesten om de niveauverschillen aan te geven..

Een dl is een definitie lijst en een ul is een normale lijst. En ul kun je dan ook nesten:

code:

<ul>
  <li>a</li>
  <li>b</li>
  <li>
    c
    <ul>
      <li>c 1</li>
      <li>c 2</li>
      <li>c 3</li>
    </ul>
  </li>
  <li>d/li>
</ul>

[drm]

Het grote voordeel van een dl boven een ul is dat je met een dt een 'label' aan het niveau kunt hangen. Met een ul is dat een stukje lastiger, omdat je met css in IE niet direct controle hebt over de tekst die als childNode in een li voorkomt.

offtopic:
Doe wat aan de naamgeving van je variabelen, ajb... iInt slaat natuurlijk nergens op

[SchizoDuckie]

r0bert schreef op 21 oktober 2004 @ 17:24:
@Crisp: Dat maakt verder niet uit toch? Want oChild.style...etc.. zal dan false returnen..

oChild.style returned waarschijnlijk eerder een lege string

[mullah]

Papa Eend schreef op 21 oktober 2004 @ 17:40:
[...]

oChild.style returned waarschijnlijk eerder een lege string

Ik heb ook wel eens NaN of undefined gezien voor dit soort waarden... ligt maar net aan je browser enzo.

[r0bert]

@ André.. Ja inderdaad, ul zou beter op zijn plaats zijn bij de nesting die ik eigenlijk wou.. Ik ben alleen beetje omgepraat.. Ik maak het scriptje voor iemand die beperkte kennis heeft van html daarom heb ik maar aangehouden <DT> is voor een hoofditem <DD> is voor een subitem, denk ik wel begrijpelijker voor die mensen..

@Drm: zeikerd maar snap je punt Ik heb het er maar gewoon helemaal uitgegooit

@Papa Eend & Mullah: Ik bedoelde dat de vergelijking met == "dd" dan false zou returnen

Nog even de oplossing die ik uiteindelijk gebruikt heb (hij's wat anders)

code:

<html>

<head>

<style type="text/css">
/* Hieronder de style voor het menuutje plakken enzo :-) */

dd, dt
{
    cursor:     hand;
}
</style>

<script type="text/javascript">
// Dit stukje hoort ook bij de code voor het uitklapmenu

function fSwitch(oEl)
{
    while (oEl.nextSibling)
    {
        oEl = oEl.nextSibling;

        if ((oEl.tagName) && (oEl.tagName.toLowerCase() == "dt"))
            return false;
            
        if ((oEl.tagName) && (oEl.tagName.toLowerCase() == "dd"))
            oEl.style.display = (oEl.style.display == "none") ? "block" : "none";
    }
}

// Eind van de code behorende bij het uitklapmenuutje
</script>

</head>

<body>

<!-- Begin van de code voor het uitklapmenuutje //-->
[img]"./images/logo_nieuw."[/img]<br />

<dl>
    <dt><a href="/">Homepage</a></dt>

    <dt onClick="fSwitch(this);">Hoofditem 1</dt>
        <dd>Item 1.1</dd>
        <dd>Item 1.2</dd>
        <dd>Item 1.3</dd>
        <dd>Item 1.4</dd>
        <dd>Item 1.5</dd>
    
    <dt onClick="fSwitch(this);">Item 2</dt>
        <dd>Item 2.1</dd>
        <dd>Item 2.2</dd>
        <dd>Item 2.3</dd>
        <dd>Item 2.4</dd>
        <dd>Item 2.5</dd>
</dl>
<!-- Eind van de code voor het uitklapmenuutje //-->

</body>

</html>

[ Voor 39% gewijzigd door r0bert op 21-10-2004 23:03 ]

[drm]

oEl.style.display = (oEl.style.display == "none") ? "block" : "none"

Het is bij de ( ? : ) operator aan te raden de haakjes om de operator te zetten en niet om de conditie, om problemen met precedence te voorkomen. Mocht de = namelijk precedence hebben boven de ? :, dan heeft doet 't niet wat het moet doen, namelijk:

code:

(oEl.style.display = (oEl.style.display == "none") ) ? a : b

Waarbij a en b verder geen effect hebben omdat ze enkel een atomaire expressie bevatten. In dit geval zal het niet uitmaken, maar het heeft mij nog wel 's een half uurtje beziggehouden

edit:

zo dus:

code:

a = ( cond ? b : c );

[ Voor 5% gewijzigd door drm op 22-10-2004 00:52 ]

[SchizoDuckie]

drm schreef op 22 oktober 2004 @ 00:52:
[...]
Het is bij de ( ? : ) operator aan te raden de haakjes om de operator te zetten en niet om de conditie, om problemen met precedence te voorkomen. Mocht de = namelijk precedence hebben boven de ? :, dan heeft doet 't niet wat het moet doen, namelijk:

code:

(oEl.style.display = (oEl.style.display == "none") ) ? a : b

Waarbij a en b verder geen effect hebben omdat ze enkel een atomaire expressie bevatten. In dit geval zal het niet uitmaken, maar het heeft mij nog wel 's een half uurtje beziggehouden

edit:

zo dus:

code:

a = ( cond ? b : c );

Wuh w8 ff... Ik doe het al jaren op de 1e manier.... welke code gebruik jij dat dat fout kan gaan?