Collasible list maken

  • Onderwerp starter Onderwerp starter mas
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
M

mas

Gebruiker
Lid geworden
1 dec 2003
Berichten
86
Hoi allemaal,

Ik ben al een paar dagen bezig om een collapsible list te maken m.b.v. javascript, maar ik kom er niet meer uit. Misschien dat ik ergens een stom foutje over het hoofd zie :( De bedoeling is om een lijst met links te maken waarvan 2 links verder geopend (en gesloten) kunnen worden zoals aangegeven in het voorbeeld hieronder:

Home
Werkwijze
Aanbod (kan open of closed)
Begeleiding
Behandeling
Opvang​
Referenties (kan open of closed)
Ref A
Ref B​

Ik heb het volgende js code
[JS]function toggle() {
this.className = this.className == "closed" ? "open": "closed";
}

function setup()
{
var lis = document.getElementsByTagName('li');
for (var i = 0; i<lis.length; ++i) {
var li = lis;
if (li.className) {
li.onclick = toggle;
li.className = "closed";
}
}
}[/JS]

Dit is het betreffende stukje html:
HTML: 
<div id="navi">
                <ul>
	  	    <li class="normaal"><a href="html/visie.html"> Visie </a></li>
		    <li class="open">Aanbod
			<ul>
				<li><a href="html/behandeling.html">Behandeling</a></li>
				<li><a href="html/begeleiding.html">Begeleiding</a></li>
				<li><a href="pdf/iq.pdf">IQ-test</a></li>
			</ul>
		    </li>
		    <li class="open">Referenties
			<ul>
				<li><a href="html/ref_a.html">Ref A</a></li>
				<li><a href="pdf/B.pdf">Ref B</a></li>
				<li><a href="html/ref_c.html">Ref C</a></li>
			</ul>
		    </li>
		    <li class="normaal"><a href="html/cv.html"> CV </a></li>
		    <li class="normaal"><a href="html/contact.html"> Contact </a></li>
		  </ul>

En de css code:

Code: 
	#navi li {
	list-style-type: none;
	}

	
	#navi li.normaal {
		list-style-image: url(../images/bal_klein.png);
	}

	#navi li.open {	
		list-style-image: url(../images/minus.png);
	}
	
	#navi li.closed {	
		list-style-image: url(../images/plus.png);
	}
	
	#navi li.closed ul {	
		display: none;
	}
	
	#navi li.open li {	
		list-style-image: url(../images/bal_klein.png);
	
	}
 
Dus uhm... wat is precies het probleem? Je code werkt hier gewoon.


:thumb:

Heb je wel setup() aangeroepen?
 
Werkt het? Het probleem is dat de links "aanbod" en " referenties" opengeklapt zijn en dus de onderliggende links 'begeleiding" etc. en " ref A" etc. getoond worden. Deze moeten niet meer te zien zijn, wanneer er op aanbod of referenties geklikt wordt, omdat deze ingeklapt worden. Maar dat werkt niet, ten minste niet bij mij.
 
Heb je toevallig een online voorbeeld? Als ik test.html open in Firefox, krijg ik netjes een klikbaar uitklap geval:
HTML: 
<html><head>
<style>
	#navi li {
	list-style-type: none;
	}

	
	#navi li.normaal {
		list-style-image: url(../images/bal_klein.png);
	}

	#navi li.open {	
		list-style-image: url(../images/minus.png);
	}
	
	#navi li.closed {	
		list-style-image: url(../images/plus.png);
	}
	
	#navi li.closed ul {	
		display: none;
	}
	
	#navi li.open li {	
		list-style-image: url(../images/bal_klein.png);
	
	}
</style>

</head><body>


<div id="navi">
                <ul>
            <li class="normaal"><a href="html/visie.html"> Visie </a></li>
            <li class="open">Aanbod
            <ul>
                <li><a href="html/behandeling.html">Behandeling</a></li>
                <li><a href="html/begeleiding.html">Begeleiding</a></li>
                <li><a href="pdf/iq.pdf">IQ-test</a></li>
            </ul>
            </li>
            <li class="open">Referenties
            <ul>
                <li><a href="html/ref_a.html">Ref A</a></li>
                <li><a href="pdf/B.pdf">Ref B</a></li>
                <li><a href="html/ref_c.html">Ref C</a></li>
            </ul>
            </li>
            <li class="normaal"><a href="html/cv.html"> CV </a></li>
            <li class="normaal"><a href="html/contact.html"> Contact </a></li>
          </ul>
</div>


<script>function toggle() {

    this.className = this.className == "closed" ? "open": "closed";
}
 
function setup()
{
    var lis = document.getElementsByTagName('li');
    for (var i = 0; i<lis.length; ++i) {
        var li = lis[i];

            li.onclick = toggle;
            li.className = "closed";
    }
}

setup();</script>


</body></html>
 
Misschien een kleine wijziging bij de functie toggle:
[JS]function toggle(element)
{
element.className = element.className == "closed" ? "open": "closed";
}[/JS]

en dan ook in de html code
HTML: 
...
<li class="open" onclick='toggle(this);'>Aanbod
...
<li class="open" onclick='toggle(this);'>Referenties
...

hoop dat dit helpt
groeten vreugde
 
Ga jou tip straks uitproberen vreugde :)
Hier is een online versie van de site, www.mischawink.nl Ik heb de site wat haastig in elkaar gezet voor mijn vriendin, en er zitten hier en daar nog wat foutjes in, maar het zou moeten werken:(

Iig alvast heel erg bedankt voor de hulp!
 
Hoi,


je roept de setup() functie niet aan. Dus, voeg dit toe net voor de </body> tag:
HTML: 
<script>
   setup();
</script>


:thumb:
 
Hij roept die wel aan hoor, op regel 72 van zijn voorbeeld code

Maar je kan ook de gehele javascript code plaatsten binnen de <head> en </head>-tag, maar dat is vaak wat je als voorkeur heb

Zelf heb ik dit, wat perfect werkt alleen kan je niet op en sublink klikken maar dat kan snel verholpen worden ;)
HTML: 
<html>
<head>
<style>
    #navi li {
    list-style-type: none;
    }
 
    
    #navi li.normaal {
        list-style-image: url(../images/bal_klein.png);
    }
 
    #navi li.open { 
        list-style-image: url(../images/minus.png);
    }
    
    #navi li.closed {   
        list-style-image: url(../images/plus.png);
    }
    
    #navi li.closed ul {    
        display: none;
    }
    
    #navi li.open li {  
        list-style-image: url(../images/bal_klein.png);
    
    }
</style>
<script language="JavaScript">
function toggle(element) 
{	
	element.className = element.className == "closed" ? "open": "closed";
}
 
function setup()
{
    var lis = document.getElementsByTagName('li');
    for (var i = 0; i<lis.length; ++i)
	{
        var li = lis[i];
		li.onclick = toggle;
        li.className = "closed";
    }
}
 
setup();
</script>
</head>

<body>
<div id="navi">
	<ul>
		<li class="normaal"><a href="#"> Visie </a></li>
		<li class="open" onclick='toggle(this);'>Aanbod
			<ul>
			<li><a href="#">Behandeling</a></li>
			<li><a href="#">Begeleiding</a></li>
			<li><a href="#">IQ-test</a></li>
			</ul>
		</li>
		<li class="open" onclick='toggle(this);'>Referenties
			<ul>
			<li><a href="#">Ref A</a></li>
			<li><a href="#">Ref B</a></li>
			<li><a href="#">Ref C</a></li>
			</ul>
		</li>
		<li class="normaal"><a href="#"> CV </a></li>
		<li class="normaal"><a href="#"> Contact </a></li>
	</ul>
</div>
</body></html>
 
Dat hoort niet te werken. Je roept immers setup() aan voordat er ook maar één li-element is; de DOM is nog niet volledig.

Je kan dus of je setup() onder de li-elementen neerzetten (bv: net voor de </body>), of een event handler gebruiken welke naar het body-load of dom-ready event luistert.
 
Zou goed kunnen maar ik roep hem zelf in de Header aan en dan werkt hij wel naar behoren, heb hem getest op een server en gewoon local en bij beide gevallen werkt hij.

resultaat te zien op: Test Link

Maar mocht ik de setup() later aanroepen onder de <li> elementen doet hij het niet. Dus het zou te maken hebben dat hij miss niet gekoppeld wordt mocht je de setup() later aanroepen, maar dat durf ik niet te zeggen.

groeten vreugde
 
Het is gelukt:) Nogmaals bedankt voor jullie hulp :thumb:
 
@Vreugde: bij jouw voorbeeld hoef je de gehele setup() niet eens te gebruiken - wis die hele functie, plus aanroep naar die functie maar eens. Omdat je IN de HTML al de functie (onclick=toggle) hebt neergezet, hoef je niet meer door de DOM heen om dit te doen.


:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan