Hoe onthoud je een waarde met onClick()?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Teun Hesseling

Teun Hesseling

13/02/2013 16:29:43
Quote Anchor link
Hallo,

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

css code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


html stukje
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


en het stukje javascript

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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";
    }
}


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.
 
PHP hulp

PHP hulp

03/12/2021 01:36:44
 
Kris Peeters

Kris Peeters

13/02/2013 16:50:04
Quote Anchor link
Er zijn veel mogelijkheden.

Hier een simpele: zet het in de URL.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Teun Hesseling

Teun Hesseling

13/02/2013 20:26:13
Quote Anchor link
ah top, Het is soms maar net waar je op googlet. Kon het gewoon niet vinden.

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)
PHP script in nieuw venster Selecteer het PHP script
1
<li><a href="Admin?p=confif#on">Config</a></li>


js stukje

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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";
    }
}




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)
PHP script in nieuw venster Selecteer het PHP script
1
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";
    }
}


html

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<li><h4><a href=""  onClick="Rollover(\'#2\'); return false;" ></a></h4>
    <ul id="#2">
    </ul>
</li>
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.