Hoe onthoud je een waarde met onClick()?

Door Teun Hesseling op 13-02-2013 16:29

1.635 views

Hallo,

Ik heb een menu die je door de te klikken zichtbaar maakt.

css code:


ul {
	margin: 0;
	padding: 0;
	margin-top: 5px;
	margin-bottom: 5px;
	
}

ul li{
	display:block;
	padding-left: 5px;
}
li ul{
	display:none;
}
ul li a{
	display:block;
}

html stukje


<ul>
						<li><h4><a href="Admin?p=users"  onClick="Rollover(); return false;" >Users</a></h4>
							<ul id="1">
								<li><a href="Admin?p=confif">Config</a></li>
								<li><a href="Admin?p=confif">ADD</a></li>
								<li><a href="Admin?p=confif">Delete</a></li>
								<li><a href="Admin?p=confif">Modify</a></li>
							</ul>
						</li>
					</ul>

en het stukje javascript


function Rollover(){
	var yolo=document.getElementById("1");
	if(yolo.style.display == "block"){
		yolo.style.display="none";
	}
	else{
		yolo.style.display="block";
	}
}

Dit werkt!

Maar wat ik nu wil, is dat het menu opengeklapt blijft als je een link aanklikt. Een soort van session in javascript ofzo.

Kris Peeters

13-02-2013 16:50

Er zijn veel mogelijkheden.

Hier een simpele: zet het in de URL.


<script>
window.onload = function(e) {
  // lezen in de url
  if (window.location.hash === '#users') {
    Rollover();  // (een beetje) doen alsof we op de link klikken
  }
}
function Rollover() {
    var yolo=document.getElementById("1");
    if(yolo.style.display == "block") {
        yolo.style.display="none";
        window.location.hash = '#';
    }
    else {
        yolo.style.display="block";
        window.location.hash = '#users'
    }
}
</script>

Teun Hesseling

13-02-2013 20:26

ah top, Het is soms maar net waar je op googlet. Kon het gewoon niet vinden.

[size=xsmall]Toevoeging op 14/02/2013 09:43:59:[/size]

Het werkte in het begin niet. heb vervolgens die windod.location.hash='#users';
eruit gehaald. en het aan de link zelf toegevoegd. heb #users veranderd naar #on, vond ik wat netter.

de link:


<li><a href="Admin?p=confif#on">Config</a></li>

js stukje


window.onload = function(e) {
  if (window.location.hash == '#on') {
    Rollover();
  }
}
function Rollover(){
	var yolo=document.getElementById("1");
	if(yolo.style.display == "block"){
		yolo.style.display="none";
	}
	else{
		yolo.style.display="block";
	}
}

[size=xsmall]Toevoeging op 14/02/2013 13:24:48:[/size]

En nog een kleine toevoeging voor mensen die eventueel na mij volgen met het zelfde probleem.
Voor meerdere menu's moet je uiteraard een id meegeven.

js


window.onload = function(e) {
  if (typeof(window.location.hash)) {
    Rollover(window.location.hash);
  }
}
function Rollover(id){
	var yolo=document.getElementById(id);
	if(yolo.style.display == "block"){
		yolo.style.display="none";
	}
	else{
		yolo.style.display="block";
	}
}

html


<li><h4><a href=""  onClick="Rollover(\'#2\'); return false;" ></a></h4>
	<ul id="#2">
	</ul>
</li>

Reageren

Inloggen om te reageren