Notifikationer

Markér alle som læst Log ud

riishoj Nybegynder

26. oktober 2006 - 13:10 Der er 8 kommentarer og
1 løsning

Udfolde menu i flere niveauer

Er det muligt at bygge videre på nedenstående menu, så den folder ud i 3 niveauer?
Altså

Åben
menu 1
submenu 1

<script type="text/javascript">

function view( targetId ){
if (document.getElementById){
target = document.getElementById( targetId );
if (target.style.display == "none"){
target.style.display = "";
} else {
target.style.display = "";
}
}
}

function hide( targetId ){
if (document.getElementById){
target = document.getElementById( targetId );
if (target.style.display == ""){
target.style.display = "none";
} else {
target.style.display = "none";
}
}
}

</script>

<div id="skjulerTabel" style="display:none;"><a style="cursor:pointer;" onClick="view('tabelNavn'); view('viserTabel'); hide('skjulerTabel');"><b>+ Åben<b></a></div>

<div id="viserTabel" style="display:;"><a style="cursor:pointer;" onClick="hide('tabelNavn'); hide('viserTabel'); view('skjulerTabel');"><b>- Skjul<b></a></div>

<table id="tabelNavn">

<tr>
<td>
<ul>
<li>Tekst 1

</li>
</ul>
</td>
</tr>

<tr>
<td>
<ul>
<li>Tekst 2<br>

</li>
</ul>
</td>
</tr>

</table>

</body>

</html>

Synes godt om

sw_red_6 Nybegynder

26. oktober 2006 - 13:18 #1

sådan her måske?

<table id="tabelNavn">

<tr>
<td>
<ul>
<li>
<ul>
<li>Tekst 1
</li>
</ul>
</li>
</ul>
</td>
</tr>

<tr>
<td>
<ul>
<li>
<ul>
<li>Tekst 2<br>
</li>
</ul>
</li>
</ul>
</td>
</tr>

</table>

Synes godt om

riishoj Nybegynder

26. oktober 2006 - 13:22 #2

Næ, men jeg har måske ikke udtrykt mig helt præcist. Det jeg gerne vil have er at når man klikker på niveau 1, så udfoldes niveau 2, og når man så klikker på niveau 2 så udfoldes niveau 3.

Synes godt om

psykochicken Nybegynder

27. oktober 2006 - 18:14 #3

du kunne prøve noget i stil med:

<style type="text/css">
ul{padding-left:30px;margin:0px;}
ul.subs{padding-left:60px;display:none;}
li{cursor:pointer;}
#tabelViser{cursor:pointer;font-weight:bold;}
</style>

<script type="text/javascript">
function view( targetId, stat ){

// skjul alle submenuer
for(i=1;i<20;i++){
if(document.getElementById("sub" + i)){
document.getElementById("sub" + i).style.display="none";
}
}

// vis/skjul targetId
if (document.getElementById){
var target = document.getElementById( targetId );
target.style.display = target.style.display == "none"? "block": "none";
}

// åbn/luk-knappen
if(stat){
var tvis = document.getElementById('tabelViser');
tvis.firstChild.nodeValue = tvis.firstChild.nodeValue=='- Luk'? '+ Åben': '- Luk';
}
}
</script>

</head>
<body>

<div id="tabelViser" onClick="view('tabelNavn',1);">+ Åben</div>

<table id="tabelNavn" style="display:none;">

<tr>
<td>
<ul>
<li onclick="view('sub1')">Menu 1</li>
</ul>
<ul id="sub1" class="subs">
<li>Submenu 1</li>
<li>Og lidt mere</li>
</ul>
</td>
</tr>

<tr>
<td>
<ul>
<li onclick="view('sub2')">Menu 2</li>
</ul>
<ul id="sub2" class="subs">
<li>Submenu 2</li>
<li>her er noget mere</li>
</ul>
</td>
</tr>

</table>

Synes godt om

riishoj Nybegynder

27. oktober 2006 - 20:05 #4

Se, det var jo ikke så dårligt. Det funger bare. 1000 tak for hjælpen. Havde næsten opgivet. Send et svar så du kan få dine velfortjente point.

Synes godt om

psykochicken Nybegynder

28. oktober 2006 - 01:23 #5

kommer her ;o)

Synes godt om

riishoj Nybegynder

28. oktober 2006 - 09:44 #6

Du skal nok få dine velfortjente point, men jeg har lige et tillægsspørgsmål, som du så kan tjene lidt ekstra på.
Kan det laves, så begge menuer er åbne samtidig og så man kan lukke dem enkeltvis?

Eks. klik på Menu1 = menuen åben
Klik igen lukker menu1

og set samme med menu2 selvfølgelig.

Nu ved jeg jo ikke om du er til asp, men jeg kunne godt tænke mig, at teksten til menuerne bliver hentet ind via en database, altså skal der indsættes nogle variabler hvor der nu er tekst. Har du noget bud på det?

Synes godt om

psykochicken Nybegynder

28. oktober 2006 - 15:03 #7

første del kan laves ved at ændre faktorernes orden i scriptet:

<script type="text/javascript">
function view( targetId, stat ){

// vis/skjul targetId
if (document.getElementById){
var target = document.getElementById( targetId );
target.style.display = target.style.display == "none"? "block": "none";
}

// åbn/luk-knappen
if(stat){
var tvis = document.getElementById('tabelViser');
tvis.firstChild.nodeValue = tvis.firstChild.nodeValue=='- Luk'? '+ Åben': '- Luk';

// skjul alle submenuer
for(i=1;i<20;i++){
if(document.getElementById("sub" + i)){
document.getElementById("sub" + i).style.display="none";
}
}
}
}
</script>

Mht. sidste del ved jeg desværre ikke nok om asp til at komme med et kvalificeret bud, men det er der heldigvis andre herinde der kan ;o)

/psc

Synes godt om

riishoj Nybegynder

28. oktober 2006 - 16:16 #8

Fint nok, jeg prøver at oprette spørgsmålet i asp-kategorien, hvilket vel også er det mest korrekte. Tak for hjælpen.

Synes godt om

psykochicken Nybegynder

28. oktober 2006 - 16:31 #9

velbekomme - og tak for point ;o)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS