login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Uitklap menu naar beneden

Offline WouterPSV - 09/06/2008 15:50 (laatste wijziging 09/06/2008 15:51)
Avatar van WouterPSVLid Ik zit het volgende probleem.

Ik heb een menu waarmee je een submenu kunt laten uitklappen. Dus wanneer ik op link 1 klik krijg ik netjes het submenu eronder.

Echter als ik op link 2 klik krijg ik ook het submenu eronder maar klapt nummer één niet automatisch dicht.

De functie:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. <!--
  3.  
  4. function expand(listID) 
  5.   {
  6.     if (listID.style.display=='none') 
  7. 	 {
  8.       listID.style.display='';
  9.      }
  10.     else 
  11. 	 {
  12.       listID.style.display='none';
  13.      }
  14.    window.event.cancelBubble=true;
  15.   }
  16.  
  17. //-->
  18. </script>


HTML Code:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="JavaScript:expand(klapuit1)">klap uit</a>
  2. <div id="klapuit1" style="display:none">
  3.   <a href="index.html">sublink1</a><br>
  4.   <a href="index.html">sublink2</a><br>
  5. </div>
  6.  
  7. <a href="JavaScript:expand(klapuit2)">klap uit</a>
  8. <div id="klapuit2" style="display:none">
  9.   <a href="index.html">sublink1</a><br>
  10.   <a href="index.html">sublink2</a><br>
  11. </div>


Al iemand mijn zou kunnen zeggen wat ik kan wijzigen zodat de ene in klapt als ik op een andere klik zou mooi zijn. Aangezien ik niet een hele goede javascripter ben.

Alvast bedankt 

11 antwoorden

Gesponsorde links
Offline Wim - 09/06/2008 15:53
Avatar van Wim Crew algemeen dat zal je handmatig er bij moeten zetten denk ik.

Misschien maak je best een functie om eerst al je menu's dicht te klappen, en klap je dan pas het menu open wat je wil open klappen!

Is een onclick trouwens niet beter dan een href?
Offline WouterPSV - 09/06/2008 15:58
Avatar van WouterPSV Lid Huh alle menu's zijn standaard dichtgeklapt.
Als ik op één klik dan gaat die open.

En hoezo is onclick beter volgens jou ?
Offline Wim - 09/06/2008 16:04
Avatar van Wim Crew algemeen 1) alle menu's beginnen dichtgeklapt. daar is zeker niets mis mee ofzo, maar wat ik bedoel is dit:
als je op een menu klikt, gebeurd er hetvolgende
functie closeAllMenus bvb wordt uitgevoerd (een functie die ALLE menu's sluit, en dus overal te gebruiken is), en vervolgens open je enkel het menu waar op geklikt is. Zo is er steeds maar 1 menu geopend!

2) Voor browsers die geen javascript ondersteunen. Anders gaan ze proberen te surfen naar bvb http://domein.tld/Javascript:expand(klapuit1)
Offline WouterPSV - 09/06/2008 16:17
Avatar van WouterPSV Lid @wimmarien.

Ik snap je punt, maar hoe krijg ik dit dan voor elkaar. Zoals ik al zei ben ik niet super met javascript, maar om dit voor elkaar te krijgen zag ik geen andere optie.

Als je me dus op weg zou kunnen helpen zou ik zeer op prijs stellen
Offline Wim - 09/06/2008 16:19 (laatste wijziging 09/06/2008 16:22)
Avatar van Wim Crew algemeen ben zelf een uurtje geleden met javascript begonnen. Heb er nooit het nut van ingezien maar volgens mij is het het makkelijkst om AJAX te gebruiken als je een basis javascript hebt, vandaar dat ik er nu mee begonnen ben.

Ik zal even voor je kijken, Wouter

//edit:
dit moet volgens mij wel werken voor klapuit1 en klapuit2:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function expand(listID) 
  2. {
  3. 	closeAll();
  4.  
  5. 	if (listID.style.display=='none') 
  6. 	{
  7. 		listID.style.display='';
  8. 	}
  9. 	else 
  10. 	{
  11. 			listID.style.display='none';
  12. 	}
  13.  
  14. 	window.event.cancelBubble=true;
  15. }
  16.  
  17. function closeAll ()
  18. {
  19. 	klapuit1.style.display='none';
  20. 	klapuit2.style.display='none';
  21. }
Offline WouterPSV - 09/06/2008 16:33
Avatar van WouterPSV Lid Het werkt zo inderdaad maar zodra ik met php bezig ga niet, want ik heb 10 sublinken in een db en die moeten via een cms te wijzigen zijn.

Als ze de naam wijzigen gaat het al niet meer bij de function close All.

Ben bang dat ik een andere optie moet vinden zodat ik het niet hoef te hard coden
Offline Wim - 09/06/2008 16:40 (laatste wijziging 09/06/2008 18:00)
Avatar van Wim Crew algemeen dat is doordat klapuit1 en klapuit2 statisch in de code staan, ik heb geen idee hoe ik dit moet doen bij javascript.

Mogelijk weet iemand anders hoe je deze dynamisch hier in kan zetten?

//edit:
persoonlijke hulp via PM bied ik niet. Daar dient het forum voor! Ik heb je PM dus ook genegeerd...
Offline WouterPSV - 09/06/2008 19:59
Avatar van WouterPSV Lid Ik heb nu het volgende. Heb wat gevonden en zelf wat gedaan.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function show_hide(object)
  2.   {
  3. 	show = true;
  4. 	obj1 = document.getElementById("master").getElementsByTagName("div");
  5. 	obj2 = document.getElementById(object);
  6.  
  7. 	if (obj2.style.display == '')
  8. 	  show = false;
  9. 		for (i = 0; i < obj1.length; i++) 
  10. 		  {
  11. 			obj1[i].style.display = 'none';
  12. 		  }
  13. 	if (show == true)
  14.   	  obj2.style.display = '';
  15.   }


Mijn Menu:
- link1
- link2

Als ik op link 1 klik komt die er goed uit. Klik ik op link 2 gaat link 1 dicht. Maar klik ik hiernaar weer op link 1 blijft ook link2 open staan.

Wie weet de oplossing hiervoor dan is het klaar.
Offline jvs - 09/06/2008 22:21 (laatste wijziging 09/06/2008 22:23)
Avatar van jvs HTML beginner Hallo,

Ik heb voor net hetzelfde probleem gestaan toen ik aan een opdracht voor school werkte. Ik heb dat toen op de volgende manier opgelost. Let wel, mijn script genereerd ook automatisch onclick events voor de juist "hoofmenu items" in jou geval. Hij doet dit door alle h1 tags binnen een bepaalde 'container div' op te zoeken en hieraan events toe te kennen. Het is grotendeels wat je zoekt denk ik. Je zal wel enkele aanpassingen moeten doen, daar had ik geen zin in maar als ik zie hoever je hierboven bent gekomen denk ik niet dat dit een probleem zal zijn.  

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function addOnclickAcc(){	
  2.  
  3. 	var j = 0;
  4. 	var h1Tags = document.getElementById(containerDiv).getElementsByTagName("h1");
  5. 	var divTags = document.getElementById(containerDiv).getElementsByTagName("div");
  6.  
  7. 	arrayDivs = new Array();
  8.  
  9. 	for (var i=0; i<h1Tags.length; i++){
  10.  
  11. 	h1Tags[i].setAttribute("id", i);
  12.  
  13. 	arrayDivs[j] = divTags[i];
  14. 	j++;
  15.  
  16. 	divTags[i].style.display = "none";
  17.  
  18. 	h1Tags[i].onclick = function () {showAcc(this, arrayDivs);}
  19. 	}
  20. }
  21.  
  22. 	//deze functie dient voor het weegeven van de verborgen div containers wanneer er op een h1 tag geklikt wordt	
  23.  
  24. function showAcc(h1Tag, array){
  25.  
  26. div = array[parseInt(h1Tag.getAttribute("id"))];
  27.  
  28. 	if(div.style.display=="block"){
  29.  
  30. 	div.style.display = "none";
  31.  
  32. 	}
  33. 	else{
  34.  
  35. 		for(var i=0;i<array.length;i++){
  36.  
  37. 			if(array[i].style.display =="block"){
  38.  
  39. 			array[i].style.display="none";
  40.  
  41. 			}
  42. 		}
  43. 	div.style.display ="block";
  44. 	}
  45. }
Offline WouterPSV - 10/06/2008 08:51
Avatar van WouterPSV Lid Zou je toevallig ook de url er bij kunnen zetten als je zeg maar op een link klikt en dat die dan uitklapt ?

Want als ik mijn eigen gebruik pakt die hem niet.
Offline jvs - 12/06/2008 16:27
Avatar van jvs HTML beginner In mijn script is het de bedoeling dat je volgende structuur hanteert:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <h1>Hoofdmenu item</h1>
  2. <div>hier je submenu items</div>


Als je liever wilt dat het script andere tags gebruikt kun je dit gemakkelijk zelf aanpassen bovenaan. Je zal ook de functie addOnclickAcc() moeten aanspreken in je body onLoad
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.191s