Avatar billede Hans1 Praktikant
17. oktober 2012 - 19:40 Der er 8 kommentarer

Skjul indhold ved klik

Hej

Når der klikkes på linket vises indholdet.
Når man klikker på linket igen skjules indholdet igen.

Men jeg vil også gerne have at indholdet skjules når man klikker et tilfældigt sted på siden.

Er det kun noget jquery kan?


<script type="text/javascript">
<!--
    function toggle_visibility(id) {
      var e = document.getElementById(id);
      if(e.style.display == 'none')
          e.style.display = 'block';
      else
          e.style.display = 'none';
    }
//-->
</script>

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo" style="display: none;">This is foo</div>

Avatar billede olebole Juniormester
17. oktober 2012 - 19:59 #1
<ole>

Gem e i en global variabel. Så kender du altid den åbne boks. Herefter kan du blot lægge en onclick handler på document, som skjuler den åbne boks, hvis der er en  =)

/mvh
</bole>
Avatar billede Hans1 Praktikant
17. oktober 2012 - 20:11 #2
Det lyder ret lige til.
Men jeg aner desværre ikke hvordan.
Avatar billede olebole Juniormester
17. oktober 2012 - 20:27 #3
Det kunne være noget i stil med:

var elmVis = null;

function hideElm() {
    if (!elmVis) return;
    elmVis.style.display = "none";
    elmVis = null;
}
function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e!==elmVis) {
        hideElm();
        e.style.display = 'block';
        elmVis = e;
    }
    else hideElm();
}

if (document.addEventListener) document.addEventListener("click", hideElm, false);
else document.attachEvent("onclick", hideElm);
Avatar billede Hans1 Praktikant
18. oktober 2012 - 16:22 #4
Jeg synes ikke rigtig at den reagere når man klikker på linket.

Har du forstand på jquery?
Avatar billede olebole Juniormester
18. oktober 2012 - 18:52 #5
Sorry, du skal naturligvis stoppe event'en i handler funktionen. Scriptet reagerer fint på dit klik, men handleren på dokument objektet fyrer af lige efter og ophæver klikket på linket. Derfor:

<script type="text/javascript">
var elmVis = null;

function hideElm() {
    if (!elmVis) return;
    elmVis.style.display = "none";
    elmVis = null;
}
function toggle_visibility(id,evnt) {
    var e = document.getElementById(id);
    if (e!==elmVis) {
        hideElm();
        e.style.display = 'block';
        elmVis = e;
    }
    else hideElm();
    evnt.cancelBubble = true;
    if (evnt.stopPropagation) evnt.stopPropagation();
}

if (document.addEventListener) document.addEventListener("click", hideElm, false);
else document.attachEvent("onclick", hideElm);
</script>
<div>
    <a href="#" onclick="toggle_visibility('foo',event)">Click here to toggle visibility of element #foo</a>
    <div id="foo" style="display: none;">This is foo</div>
</div>
<div>
    <a href="#" onclick="toggle_visibility('bar',event)">Click here to toggle visibility of element #fbar</a>
    <div id="bar" style="display: none;">This is bar</div>
</div>

Ja, jeg bruger rimelig ofte jQuery. Jeg forstår tilmed, hvad jeg laver med det ... fordi jeg først har lært JavaScript. Det kan jeg på det varmeste anbefale at gøre  =)
Avatar billede Hans1 Praktikant
18. oktober 2012 - 19:31 #6
Ja nu virker det :-)

Ville det være for overkill med brug af jquery til dette?
Avatar billede olebole Juniormester
18. oktober 2012 - 20:09 #7
Hvis du ikke i forvejen bruger jQuery på siden, så synes jeg, det ville være overkill at begynde her.

Det er ganske let at kode mod jQuery - men for at skrive god kode med jQuery, skal du være ligeså god til JavaScript/DOM/CSS, som man skal, hvis man ikke bruger jQuery.

Derfor anbefaler jeg altid, at hobbyfolk først lærer at skrive JavaScript rigtig godt, før de kaster sig ud i jQuery. Rigtig mange dårlige JS'ere er dybt uenige heri. Derimod har jeg kun mødt ganske få gode JS'ere, som er uenige ... men det er dog sket  =)
Avatar billede Hans1 Praktikant
19. oktober 2012 - 09:11 #8
Okay jeg begynder kun med Javascript :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester