[JS] Uitklapmenu werkt niet in I.E.

dinsdag 19 juli 2011 09:15

Acties:

0 Henk 'm!

Topicstarter

Geachte tweakers,

Mijn werkgever wilt graag dat ik op hun website een uitklapbaar menu maak, precies zoals ik deze in onderstaande code heb uitgewerkt (het resultaat).

Echter, ik heb hem prima werkend gemaakt onder Firefox, maar onder IE gaat het mis.

Ik vermoed dat de getElementsByClassName niet werkt onder IE. Ik heb inmiddels al van alles binnen mijn kennis geprobeerd (tagName gebruiken e.d.), maar ik krijg het niet aan de praat. Ook google heb ik redelijk doorgespit, echter een kant-en-klaar script van 300 regels is ook niet echt iets waar ik op zit te wachten

.

Kan iemand mij in de goede richting helpen?

Dank!

Onderstaand staat de code, ik ga dit proberen mooi in een code blok te plaatsen...

HTML:

<html>

<head>
<script type="text/javascript">
    function expand (item)
    {   
        curr = item.parentNode.childNodes[3];       
        non_curr_main = document.getElementsByClassName('groep');
                
        if (curr.getAttribute('class')=='vis')
        {
            curr.setAttribute('class','invis');
        }
        else
        {
            curr.setAttribute('class','vis');               
        }                       
        
        for (n=0; n<=non_curr_main.length; n++)
        {           
            if (item.parentNode != non_curr_main[n])
            {
                if (non_curr_main[n].childNodes[3])
                {
                    non_curr_child = non_curr_main[n].childNodes[3];

                    if (non_curr_child.getAttribute('class')=='vis')
                    {
                        non_curr_child.setAttribute('class','invis');
                    }
                    else
                    {           
                        non_curr_child.setAttribute('class','invis');           
                    }           
                }
            }
        }
    }

</script> 
<style type="Text/css">
    .invis {
        display:    none;
    }
    
    .vis {
        display:        block;
        padding-left:   20px;
    }
</style>
</head>

<body>
<ul class="taklijst" id="cursuslijst">

    <li class="groep">
        <a href="#" onclick="expand(this);" title="Cursus1">Business Intelligence</a>
        <ul class="invis" class="taklijst">
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>
        </ul>
    </li>
    
    <li class="groep">
        <a href="#" onclick="expand(this);" title="Testtraining">Testtraining</a>
        <ul class="invis" class="taklijst">
            <li><a href="/webdesign.htm"  title="Testtraining">Testtraining</a></li>
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>            
        </ul>       
    </li>
        
    <li class="groep">
        <a href="#" onclick="expand(this);" title="Business Intelligence cursussen, opleidingen en trainingen.">Warehouse trainingen</a>
        <ul class="invis" class="taklijst">
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>
            <li><a href="testlink.htm"  title="Titel voor cursussen, opleidingen en trainingen."><img src="/images/emptypx.gif" width="19" heigth="17" alt="" border="0" align="absbottom">Cursus titel</a></li>
        </ul>
    </li>
    
</ul>

</body>

</html>

[ Voor 0% gewijzigd door BtM909 op 19-07-2011 15:31 ]

dinsdag 19 juli 2011 09:21

Acties:

0 Henk 'm!

prutsger

getElementsByClassName wordt inderdaad niet ondersteund in IE. Ik weet de status van IE9 niet maar daarvoor in elk geval niet.

Zie ook http://robertnyman.com/20...ntsbyclassname-anno-2008/

Maar waarom doe je dit met javascript, tegenwoordig (al zeker 5 jaar!) kun je prima uitklapmenu's maken met CSS, wat in elke browser werkt, zelfs IE6.

dinsdag 19 juli 2011 09:22

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Stinow schreef op dinsdag 19 juli 2011 @ 09:15:
Ik vermoed dat de getElementsByClassName niet werkt onder IE.

[google=getelementsbyclassname in ie] << Meer werk dan een topic openen

In de eerste hit zie je exact dezelfde vraag met exact hetzelfde antwoord als je hierboven krijgt. Verder is het hier niet de bedoeling je code/script neer te gooien en dan af te wachten tot wij 't voor je fixen: Kan iemand even...?

Graag had ik dus, per onze Quickstart, gezien wat je zelf al had geprobeerd/gezocht/gevonden om 't op te lossen.

Verder wil je waarschijnlijk een correct doctype gebruiken en meuk als align="absmiddle" naar CSS verhuizen

[ Voor 67% gewijzigd door RobIII op 19-07-2011 09:28 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 19 juli 2011 09:23

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Javascript

prutsger schreef op dinsdag 19 juli 2011 @ 09:21:
Ik weet de status van IE9 niet maar daarvoor in elk geval niet.

IE9 is de eerste versie IE met native ondersteuning voor getElementsByClassName

Intentionally left blank

dinsdag 19 juli 2011 09:39

Acties:

0 Henk 'm!

Stinow

Topicstarter

RobIII schreef op dinsdag 19 juli 2011 @ 09:22:
[...]

[google=getelementsbyclassname in ie] << Meer werk dan een topic openen In de eerste hit zie je exact dezelfde vraag met exact hetzelfde antwoord als je hierboven krijgt. Verder is het hier niet de bedoeling je code/script neer te gooien en dan af te wachten tot wij 't voor je fixen: Kan iemand even...?

Graag had ik dus, per onze Quickstart, gezien wat je zelf al had geprobeerd/gezocht/gevonden om 't op te lossen.

Verder wil je waarschijnlijk een correct doctype gebruiken en meuk als align="absmiddle" naar CSS verhuizen

Zoals ik al zei, een kant-en-klaar script van 300 regels is ook niet echt iets waar ik op zit te wachten. Die site had ik natuurlijk ook al gezien.

Een aantal dingen die ik heb geprobeerd:

UL element van de grote lijst ophalen middels getElementById, vervolgens verwijzen naar de child elementen middels childNodes[x] en daarvan de class waarde ophalen met .getAttribute('class').
UL element van de grote lijst ophalen en verwijzen naar de subelementen middels:

code:

1 2	tst = getElementsById('cursuslijst'); lijst = tst.getElementsByTagName('li');

Vervolgens doorloopte ik de LI elementen binnen LIJST in een loop en daarin zocht ik naar het A element (om de class te achterhalen) middels:

code:

1	lijst[i].getElementsByTagName('a').getAttribute('class');

Echter helaas ook zonder gewenst resultaat. Nu is mijn javascript kennis niet zoals die van jullie, maar uit bijvoorbeeld de website (die ik ook al had gezien

), kan ik niet veel opmaken..

Dank,

Stijn

dinsdag 19 juli 2011 09:40

Acties:

0 Henk 'm!

Stinow

Topicstarter

RobIII schreef op dinsdag 19 juli 2011 @ 09:22:
[...]
Verder wil je waarschijnlijk een correct doctype gebruiken en meuk als align="absmiddle" naar CSS verhuizen

I know

. Ik heb de relevante code even in dit blok gekopieerd. Het CSS deel (en uberhaupt het design) is iets wat ik gelukkig binnenkort mag oppakken, want dat is a.t.m. nog niet veel soeps

.

Dank wel voor je input natuurlijk.

[ Voor 4% gewijzigd door Stinow op 19-07-2011 09:41 ]

dinsdag 19 juli 2011 09:42

Acties:

0 Henk 'm!

418O2

Cascading Stylesheet:

.groep  ul {
display:none;
}
.groep:hover ul {
display:block;
}

Dit gaat wel paniekerig werken, je zou dan bijv. naar een HoverIntent-achtige plugin kunnen kijken om een en ander wat gebruiksvriendelijker te laten werken.

Hovermenu's met CSS werken vaak wel, maar echt overdreven soepel gaat dat meestal niet.

dinsdag 19 juli 2011 09:43

Acties:

0 Henk 'm!

Stinow

Topicstarter

prutsger schreef op dinsdag 19 juli 2011 @ 09:21:
[..]

Maar waarom doe je dit met javascript, tegenwoordig (al zeker 5 jaar!) kun je prima uitklapmenu's maken met CSS, wat in elke browser werkt, zelfs IE6.

Hmm, daar had ik nog niet naar gekeken. CSS3 (IE6?

) moet ik dan naar kijken denk ik?

dinsdag 19 juli 2011 09:47

Acties:

0 Henk 'm!

418O2

:hover zit al iets langer in de CSS spec. Moet het echt op IE6 gaan werken? Dan wens ik je veel succes, want dat is een aardige bitch als je precies weet wat je doet en ik heb een vermoeden dat front-enddevelopement niet jouw dayjob is...

dinsdag 19 juli 2011 09:49

Acties:

0 Henk 'm!

Verwijderd

Stinow schreef op dinsdag 19 juli 2011 @ 09:43:
[...]

Hmm, daar had ik nog niet naar gekeken. CSS3 (IE6? ) moet ik dan naar kijken denk ik?

Als ik het goed heb (en ik weet het eigenlijk wel zeker) werken :hover en :active zonder problemen in IE6 (en zijn CSS2).

Daarnaast raad ik toch aan om een Javascript framework te gebruiken (zoals jQuery). Niet alleen maakt het dit een stuk gemakkelijker, ik weet bijna zeker dat je meer Javascript zal gaan gebruiken, zeker bij een moderne website.
En zo'n framework heeft alle uitzonderingen (voor IE6 e.d.) al opgelost, dus waarom zelf proberen?

dinsdag 19 juli 2011 09:51

Acties:

0 Henk 'm!

prutsger

IE6 ontwikkel ik niet meer voor, maar ik check wel altijd even of het werkt. Het enige waar je met CSS tegenaan loopt is dat in IE de :hover alleen op een a element werkt. Ik geef de a dus altijd een display: block en een width en height even groot als de li waar die in zit.

Je voorkomt meteen dat je tegen SEO problemen aanloopt (http://andrescholten.net/css-menu/).

dinsdag 19 juli 2011 10:01

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Verwijderd schreef op dinsdag 19 juli 2011 @ 09:49:
[...]

Als ik het goed heb (en ik weet het eigenlijk wel zeker) werken :hover en :active zonder problemen in IE6 (en zijn CSS2).

Euh, nee. :hover werkt alleen op anchors in IE6

Vandaar ook de vele :hover scriptjes.
Los van 't feit dat je gek bent als je anno 2011 nog rekening houdt met dat stuk (*&#*(&$@($

[ Voor 30% gewijzigd door RobIII op 19-07-2011 10:04 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 19 juli 2011 10:17

Acties:

0 Henk 'm!

Stinow

Topicstarter

Enige probleem wat ik ervaar als ik :active e.d. gebruik, is dat eigenlijk de andere elementen (menu items) moeten inklappen zodra een andere uitklapt, etc. Dat werkt volgens mij niet zo met CSS.

dinsdag 19 juli 2011 10:19

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Stinow schreef op dinsdag 19 juli 2011 @ 10:17:
Enige probleem wat ik ervaar als ik :active e.d. gebruik, is dat eigenlijk de andere elementen (menu items) moeten inklappen zodra een andere uitklapt, etc. Dat werkt volgens mij niet zo met CSS.

quote: http://www.w3.org/TR/CSS2...ml#dynamic-pseudo-classes
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 19 juli 2011 10:21

Acties:

0 Henk 'm!

418O2

Zo gauw het parent element geen :hover meer heeft, gaat hij terug naar zijn non-hoverstate, dus hidden.

Wat je alleen krijgt met een :hover op de 'parent'-anchor, is dat eea weer inklapt zogauw je het submenu hovered, omdat de anchor zijn hover dan verliest.

dinsdag 19 juli 2011 10:48

Acties:

0 Henk 'm!

Stinow

Topicstarter

Ik heb even, om het op korte termijn werkend te krijgen in IE, de extra code van die website gebruikt.
Nu heb ik het even doorgelezen en het lijkt mij dat dit gewoon boven mijn functie kan komen te staan, klopt dit? Want ik heb hem letterlijk overgenomen, en enkel het eerste argument v/d nieuwe functie is optioneel, dus hij zou (dacht ik) zo moeten werken. Enkel krijg ik nog gewoon de: "Deze eigenschap of methode wordt niet ondersteund door dit object" melding.

dinsdag 19 juli 2011 10:54

Acties:

0 Henk 'm!

Stinow

Topicstarter

Stinow schreef op dinsdag 19 juli 2011 @ 10:48:
Ik heb even, om het op korte termijn werkend te krijgen in IE, de extra code van die website gebruikt.
Nu heb ik het even doorgelezen en het lijkt mij dat dit gewoon boven mijn functie kan komen te staan, klopt dit? Want ik heb hem letterlijk overgenomen, en enkel het eerste argument v/d nieuwe functie is optioneel, dus hij zou (dacht ik) zo moeten werken. Enkel krijg ik nog gewoon de: "Deze eigenschap of methode wordt niet ondersteund door dit object" melding.

De aanroep moet nu natuurlijk zonder document. ervoor...

Ik ga nog even verder stoeien! Want de childNodes nummering komt denk ik ook niet overeen met I.E.

De melding ben ik ondertussen achter gekomen. Ik gebruik firebug en voor IE de debugbar, echter werd ik daar nog niet veel wijzer uit. Hij verwees mij wel naar de juiste regel, maar kon de fout nog niet herkennen.

Dat ik geen epische Javascript pro ben is zo, maar de basiskennis van javascript ken ik toch echt wel.

Begrijp mij ook niet verkeerd, maar ik krijg de indruk dat ik hier weg gedrukt wordt en beter niets had kunnen posten terwijl ik:

* Informatie verstrekte over het probleem, inclusief code.
* Niet te veel informatie verstrekte, omdat er anders geklaag komt over de lappen tekst met wat ik allemaal heb uitgeprobeerd.
* Met veel regelmaat stoei met Javascript en lees over Javascript, maar niet foutloos ben, zoals de mods

hier.
* Ik niet vraag om een oplossing maar enkel of iemand mij op de goede weg kan helpen.. en dat lijkt te zijn gebeurd

.

@ tip voor het editten: dank, melding had ik niet gezien.

[ Voor 38% gewijzigd door Stinow op 19-07-2011 13:40 ]

dinsdag 19 juli 2011 11:08

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Stinow schreef op dinsdag 19 juli 2011 @ 10:48:
Nu heb ik het even doorgelezen en het lijkt mij dat dit gewoon boven mijn functie kan komen te staan, klopt dit?

Met alle respect, maar waarom ben je met dit project bezig? Zou het niet handig zijn als je je even verdiept in de basiskennis van JS? Begrijp me niet verkeerd, ik bedoel het namelijk niet zo, maar je bent nu gewoon "in 't wilde weg" zaken aan 't proberen i.p.v. gericht een probleem aan 't oplossen/aanpakken. Ik roep wel eens: "in 't donker met een honkbalknuppel in een porceleinwinkel op een mug aan 't jagen"

Wat je nodig hebt is licht (kennis) en een vliegenmepper (de juiste tools/code/functies/whatnot).

Stinow schreef op dinsdag 19 juli 2011 @ 10:48:
Enkel krijg ik nog gewoon de: "Deze eigenschap of methode wordt niet ondersteund door dit object" melding.

Debuggen: Hoe doe ik dat? en kijk eens naar Firebug/IE F12 Dev.tools/Chrome Dev.tools/Safari Dev.tools/Opera Dragonfly

Dan nog 1 dingetje: Gebruik a.u.b de edit knop (

) als je iets toe te voegen hebt; je topic herhaaldelijk omhoogschoppen is niet nodig en die melding staat er niet voor niets:

[ Voor 48% gewijzigd door RobIII op 19-07-2011 11:13 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 19 juli 2011 11:11

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Ik zou het heel eenvoudig met li:hover oplossen. Eventueel voor IE 6 een scriptje schrijven (of Suckerfish gebruiken) dat onMouseOver en onMouseOut een class toevoegd/verwijderd. Easy.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

dinsdag 19 juli 2011 20:52

Acties:

0 Henk 'm!

C0rnelis

Als je een enkel een alternatief zoekt voor getElementsByClass moet je simpelweg getElementsByTagName gebruiken en vervolgens filteren op className. Voor de rest van de code moet ik je echt aanraden om fatsoenlijk te coden. Er bestaan niet voor niets klassen/ids en subklassen en weet ik niet wat meer.. Gebruik dit dan ook! zodat je in javascript gemakkelijker document.getElementById() kan gebruiken ipv .parentNodes.childNodes[3].

Je ziet namelijk toevallig dat het in dit geval niet cross-browser werkt. Het dichtsbijzijnde van een oplossing staat hieronder, maar ik zou dit nooit op een productie (of een eigen hobby site for that matter) gebruiken. Ruim eerst de broncode grondig op!

Opmerkingen;

Internet Explorer heeft altijd problemen gehad met setAttribute/getAttribute, gebruik daarom .className voor klassen.
Internet Explorer < 9 ondersteunt geen document.getElementsByClassName. Je kan hier op testen en dan terug vallen op getElementsByTagName en de klassen vergelijken.
Is het hele gedoe omtrend de parentNode nodig als je van ul#cursuslijst de klasse verandert (of weghaalt)?
Wie heeft je wijs gemaakt dat 2x een class attribuut geven aan een element common practice is?
Javascript en element.className vergelijkt letterlijk, meerdere klassen worden op deze manier niet ondersteunt in Internet Explorer (document.getElementsByClassName kan hier wel mee overweg). Vraag je daarom af of het niet anders kan mbt <ul class="invis" class="taklijst">. Ik weet niet waarvoor je het nodig hebt maar voor in bijv. CSS kan het ook door het gebruik van '#cursuslijst ul'.
Als je onclick="functie(); return false;" gebruikt (of return false aan het einde in de functie) voorkom je dat je browser ook daadwerkelijk naar a.href browst.

Denk na over de logica van wat je schrijft...

JavaScript:

if (non_curr_child.getAttribute('class')=='vis')  { 
        non_curr_child.setAttribute('class','invis'); 
} else {             
        non_curr_child.setAttribute('class','invis');             
}

Wat is hier van het eindresultaat? Dit kan in 1 regel zonder if..

Om te voorkomen dat je test-case voor op dit forum vol zit zonder troep had je bijv. alle titels en plaatjes weg kunnen halen omdat deze in jouw vraag niet relevant zijn. Dit om het gemakkelijk te maken voor de mensen die je willen helpen.
Doordat je niet specifiek genoeg je element definieert heb je veel rotzooi die bijv. Chrome/Firefox negeren maar waarop Internet Explorer eruit klapt. Dit ligt aan jou en niet aan de 'vriendelijke' engines van andere browsers. Om dit op te lossen moeten er meerdere if-statements gemaakt worden voordat er iets gedaan kan worden.
JavaScript:
1 2 3 4
if(item && item.className) ... if(non_curr_main[n] && non_curr_main[n].className && ...
Zonder dit knalt Internet Explorer eruit op 'undefined'

Enige wat mij wel opviel is dat het ietwat anders uitzien in Internet Explorer dan in Chrome, maar misschien heb ik ergens een steek laten vallen. Misschien dat dit iets heeft te maken met childNodes[2] ipv childNodes[3]. childNodes[3] geeft 'undefined' in Internet Explorer 8 bij mij, maar ik heb niet de moeite genomen om uit te zoeken waarom. Dat laat ik aan jou over.

HTML:

<html> 
<head> 
<script type="text/javascript">
    function toggleShow (item)
    {
        if(item && item.className)
        {
            if (item.className == 'vis') 
            { 
                item.className = 'invis'; 
            } 
            else 
            { 
                item.className = 'vis';
            }
        }
    }

    function expand (item) 
    {
        var curr = item.parentNode.childNodes[3];
        if(!curr)
        {
            var curr = item.parentNode.childNodes[2];
        }
        toggleShow(curr);    
        
        if(document.getElementsByClassName)
        {   /* browsers like IE 9 or any non-IE browser (firefox, chrome) */
            var non_curr_main = document.getElementsByClassName('groep');
            
            for (n=0; n<=non_curr_main.length; n++) 
            {             
                if (non_curr_main[n] && item.parentNode != non_curr_main[n]) 
                { 
                    if (non_curr_main[n].childNodes[3]) 
                    { 
                        var non_curr_child = non_curr_main[n].childNodes[3];     
                        non_curr_child.className = 'invis';    
                    } 
                } 
            }
        }
        else
        {   /* for silly browsers like IE 8 */
            var non_curr_main = document.getElementsByTagName('li');
            for (var n=0; n<=non_curr_main.length; n++) 
            {
                if(non_curr_main[n] && non_curr_main[n].className 
                    && non_curr_main[n].className == 'groep')
                {
                    if (item.parentNode != non_curr_main[n]) 
                    { 
                        if (non_curr_main[n].childNodes[2]) 
                        { 
                            var non_curr_child = non_curr_main[n].childNodes[2];
                            non_curr_child.className = 'invis';       
                        } 
                    }
                 }
            }
        }
    }
</script>  
<style type="Text/css"> 
    .invis { 
        display:    none; 
    } 
     
    .vis { 
        display:        block; 
        padding-left:    20px; 
    } 
</style> 
</head> 
<body> 
<ul class="taklijst" id="cursuslijst"> 
    <li class="groep"> 
        <a href="#" onclick="expand(this);">Business Intelligence</a> 
        <ul class="invis" class="taklijst"> 
            <li><a href="testlink.htm">Cursus titel</a></li> 
        </ul> 
    </li>      
    <li class="groep"> 
        <a href="#" onclick="expand(this);">Testtraining</a> 
        <ul class="invis" class="taklijst"> 
            <li><a href="testlink.htm">Cursus titel</a></li> 
            <li><a href="testlink.htm">Cursus titel</a></li> 
        </ul>         
    </li>
    <li class="groep"> 
        <a href="#" onclick="expand(this);">Warehouse trainingen</a> 
        <ul class="invis" class="taklijst"> 
            <li><a href="testlink.htm">Cursus titel</a></li> 
            <li><a href="testlink.htm">Cursus titel</a></li> 
            <li><a href="testlink.htm">Cursus titel</a></li> 
        </ul> 
    </li> 
</ul> 
</body> 
</html>

Laatste opmerking: je kan voorkomen om overal onclick=function(this) neer te zetten. Zie ook een gedeelte van het javascript in deze post: http://gathering.tweakers.net/forum/view_message/36366626

woensdag 20 juli 2011 08:57

Acties:

0 Henk 'm!

R4gnax

Javascript

C0rnelis schreef op dinsdag 19 juli 2011 @ 20:52:
Opmerkingen;
[...]

Da's nou een goede samenvatting van de redenen om in de praktijk een library zoals jQuery te gebruiken.

JavaScript:

$( document ).ready( function() {
  var $menu = $( "#cursuslijst" );

  $menu.delegate( "li.groep > a", "click", function( event ) {
    event.preventDefault();

    $menu
      .find( ".taklijst" )
      .hide();

    $( this )
      .siblings( ".taklijst" )
      .show();
  });
});

Pagina: 1

Reageer

Onderwerpen