Avatar billede mccookie Seniormester
06. oktober 2006 - 21:44 Der er 15 kommentarer og
1 løsning

Dynamisk menu, folde de andre menu punkter ind

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
function showMenu(pic,sub){
  var d = document.getElementById(sub).style;
  pic.src = d.display != 'block' ? "pil_ned.gif" : "pil_right.gif";
  d.display = d.display != 'block' ? "block" : "none";
}
</script>


</head>

<body>

Filename: <i>/testmig/menu_der_ruller_ned_med_css_og_javascript.php</i> <br />

<hr />

<div id="menuFunktioner" class="menu">
  <img src="pil_right.gif" onclick="showMenu(this,'underFunk');" style="cursor:pointer;">
  Menu - Support
  <div id="underFunk" style="display:none;">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">Servicecentret / Svar</a><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">Åbningstider / Svar</a><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">Priser / Svar</a><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">RMA / Svar</a><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">FAQ / Svar</a><br>
  </div>
</div>


<div id="menuFunktioner" class="menu">
  <img src="pil_right.gif" onclick="showMenu(this,'underFunk2');" style="cursor:pointer;">
  Menu - Support
  <div id="underFunk2" style="display:none;">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">Servicecentret / Svar</a><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">Åbningstider / Svar</a><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">Priser / Svar</a><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">RMA / Svar</a><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">FAQ / Svar</a><br>
  </div>
</div>





<hr  />

</body>

</html>


Følgende script giver mig 2 menupunkter der indeholder nogle underpunkt og kunne tænke mig at når men åbner 1, så lukker den alle andre øvrige åbne menuer....

Hvordan går jeg det lettes??
Avatar billede soes Nybegynder
06. oktober 2006 - 22:07 #1
var mRef = null;
function showMenu(pic,sub){
    if (mRef)
        mRef.style.display = "none";

    var d = document.getElementById(sub).style;
    mRef = d;
    pic.src = d.display != 'block' ? "pil_ned.gif" : "pil_right.gif";
    d.display = d.display != 'block' ? "block" : "none";
}

herved har vi en reference til det sidste punkt der blev vist. Når du folder et nyt punkt ud vil du så først folde det gamle sammen hvis der er en reference.
Avatar billede soes Nybegynder
06. oktober 2006 - 22:12 #2
if (mRef)
        mRef.style.display = "none";
burder være

if (mRef)
        mRef.display = "none";

Med koden her er det ikke muligt at få et åbent menu pkt. til at folde sig sammen igen.
Avatar billede mccookie Seniormester
06. oktober 2006 - 22:52 #3
Næh....det er jo ikke så godt......

Kunne man lave et OR led i den første if sætning ?? er ikke stiv i javascript
Avatar billede mclemens Nybegynder
06. oktober 2006 - 23:46 #4
måske ?

<script type="text/javascript">

var mRef;

function showMenu(pic,sub){

  var d = document.getElementById(sub).style;

  d.display = (d.display != 'block' && mRef!=d)? "block" : "none";

  if(mRef&&mRef!=d)mRef.display = "none";

  mRef = d;

  pic.src = d.display != "none" ? "pil_right.gif" : "pil_ned.gif";

}
</script>
Avatar billede mclemens Nybegynder
07. oktober 2006 - 00:02 #5
Ups i ovenstående skal
  d.display = (d.display != 'block' && mRef!=d)? "block" : "none";
rettes til:
  d.display = (d.display != 'block' || mRef!=d)? "block" : "none";
Avatar billede mccookie Seniormester
07. oktober 2006 - 00:30 #6
Nu driller billedet......
Avatar billede mclemens Nybegynder
07. oktober 2006 - 00:35 #7
havde ikke testet den med billedet ... sorry ;)



<script type="text/javascript">

var mRef;

function showMenu(pic,sub){

  var d = document.getElementById(sub).style;

  d.display = (d.display != 'block' || mRef!=d)? "block" : "none";

  if(mRef&&mRef!=d)mRef.display = "none";

  mRef = d;

  pic.src = d.display != "none" ? "pil_ned.gif":"pil_right.gif";

}
</script>
Avatar billede mclemens Nybegynder
07. oktober 2006 - 00:36 #8
hov, nej ved close af menuen på modsatte
menu mangler der lidt to sekunder ...
Avatar billede mclemens Nybegynder
07. oktober 2006 - 00:39 #9
sådan :D


<script type="text/javascript">

var mRef,mPic;

function showMenu(pic,sub){

  var d = document.getElementById(sub).style;

  d.display = (d.display != 'block' || mRef!=d)? "block" : "none";

  if(mRef&&mRef!=d)mRef.display = "none";

  if(mPic)mPic.src = mRef.display != "none" ? "pil_ned.gif":"pil_right.gif";

  mRef = d; mPic=pic;

  pic.src = d.display != "none" ? "pil_ned.gif":"pil_right.gif";

}
</script>
Avatar billede mclemens Nybegynder
07. oktober 2006 - 23:26 #10
Søs'er kast et svar ;)
... klaveret burde spille ... :)
Avatar billede mccookie Seniormester
08. oktober 2006 - 10:19 #11
Vi er tæt på.....

men...

Åbner man punkt 1 og derefter punkt 2, så lukker punkt 1 - Men billedet går ikke tilbage til udgangsposition ;(
Avatar billede mclemens Nybegynder
08. oktober 2006 - 10:58 #12
07/10-2006 00:39:08 virker hos mig ?
Avatar billede mclemens Nybegynder
08. oktober 2006 - 11:02 #13
^ - Skal jeg uploade et eksempel ?
Avatar billede mccookie Seniormester
08. oktober 2006 - 16:42 #14
jatak... upload gerne noget :)
Avatar billede mccookie Seniormester
08. oktober 2006 - 16:45 #15
mclemens>>

Jeg har gjort dig uret ;(

Dit forslag 00:39:08 virker lige efter ønsket :)

Tak for hjælpen ;)
Avatar billede mclemens Nybegynder
08. oktober 2006 - 17:50 #16
Helt ok, der var jo lidt
forskelligt at sortere ;)

Velbekom, og tak for point :)
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