Hoe onthoud je een waarde met onClick()?
Ik heb een menu die je door de te klikken zichtbaar maakt.
css code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}
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
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<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>
<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
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function Rollover(){
var yolo=document.getElementById("1");
if(yolo.style.display == "block"){
yolo.style.display="none";
}
else{
yolo.style.display="block";
}
}
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.
Hier een simpele: zet het in de URL.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
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>
Toevoeging op 14/02/2013 09:43:59:
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:
Code (php)
1
<li><a href="Admin?p=confif#on">Config</a></li>
js stukje
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
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";
}
}
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";
}
}
Toevoeging op 14/02/2013 13:24:48:
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
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";
}
}
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
Code (php)
1
2
3
4
2
3
4
<li><h4><a href="" onClick="Rollover(\'#2\'); return false;" ></a></h4>
<ul id="#2">
</ul>
</li>
<ul id="#2">
</ul>
</li>