javascript - Menu: billede skal skifte ved klik - Udvikleren.dk

Tags: javascript

<< < 1 2 > >>

Bruger #14061 @ 14.08.08 17:15

Jeg har på www.musikipedia.dk lavet en toggle menu (tror jeg det hedder). Når man klikker på fx kategrien "Funktioner" skal +billedet (billeder/plus.gif) til et minus (billeder/minus.gif). Hvis man igen klikker på kategorien så underpunkterne forsvinder skal billedet skifte tilbage til +, osv..
Er det muligt med noget JavaScript? Selve menu-scriptet findes her:
www.musikipedia.dk(menu.htm

Jeg kunne også godt tænke mig at menuen forbliver åben når man er på en af undersiderne. Dvs. at hvis jeg klikker på "funktioner" og klikker mig ind på undersiden "Alle funktioner", så skal undersiderne i menuen ikke forsvinde når jeg er på den nye side.
Er det muligt når alle siderne bruger samme include script?

Jeg er meget dårlig til JacaScript, så tingene skal skæres lidt ud i pap

15 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 7 karma

Sorter efter stemmer Sorter efter dato

Bruger #345 @ 15.08.08 09:30

Eller bare bruge cookies (sessions bruger for det meste alligevel cookies). Hvis man kan gøre det på klienten bør man også gøre det, for at aflaste serveren.

JScript kode

 function toggle(lagNavn, img) {
     var obj = document.getElementById(lagNavn);
 
     if(obj)
     {
         var idrx = new RegExp("\\b" + lagNavn + "\\|", "g");
         var regex = /\/plus\.gif$/i;
         var wasShown = obj.style.display == "block";
         var cookie = document.cookie;
 
         obj.style.display = wasShown?"none":"block";
 
         if(wasShown)
             document.cookie = cookie.replace(idrx, "");
         else
             document.cookie = cookie + lagNavn + "|";
 
         if(regex.test(img.src))
             img.src = "billeder/minus.gif";
         else
             img.src = "billeder/plus.gif";
     }
 }

Bemærk at cookie værdien intet navn har fået, men at det sagtens kan lade sig gøre. Jeg har ikke til formål at skrive det hele for dig, bare at hjælpe dig på vej.

Men cookien kan læses fra serveren, så når du skaber menuen kan du læse cookien og se hvilke punkter der skal være foldet ud. Men den del er op til dig selv (Jeg holder mig konsekvent fra PHP, pågrund af psykisk helbred).

Indlæg senest redigeret d. 15.08.2008 09:31 af Bruger #345

Bruger #11328 @ 14.08.08 17:45

1.323

Har udvidet din toggle funktion:

Kode

<script type="text/javascript">
function toggle(lagNavn) {
    var obj = document.getElementById(lagNavn);
    if(obj)
        obj.style.display=(obj.offsetHeight==0?'block':'none');
        
    var img = obj.childNodes(0);
    var imgSrc = img.getAttribute("src");
    if(imgSrc == "billeder/plus.gif")
        img.setAttribute("src", "billeder/minus.gif");
    else
        img.setAttribute("src", "billeder/plus.gif");
}
</script>

Koden er ikke testet..

Husk at sætte srciptet i <head>!

Bruger #10216 @ 14.08.08 18:27

4.283

Og for dem som er mere til css kan man toggle en css-klasse

Kode

<script type="text/javascript">
function toggle(lagNavn,className) {
	className = className ? className : 'plus';
    var obj = document.getElementById(lagNavn);
    if(obj) {
    	var cls = obj.className.split(' ');
    	if((idx = cls.indexOf(className)) != -1) {
    		cls = cls.splice(idx,0);
	    	obj.className = cls.join(' ');
    	} else {
    		obj.className = obj.className+' '+className;
    	}
    }
}
</script>
<style>
	.plus { font-weight: bold; }
</style>
<a href="#" onclick="toggle('test');">adasd</a>
<div id="test">asdasd</div>

Bruger #14061 @ 14.08.08 17:53

-5

Det ser ikke ud til at Scriptet virker, eller også gør jeg noget forkert.

Det virkede ikke da jeg indsatte scriptet i <head> på fx index.php siden.
Det er dog også mest logisk (siger jeg uden at vide noget om det), at scriptet er placeret i menu include(); filen. Så jeg prøvede at indsætte den der (øverst i filen - den har ikke noget head), både med det gamle javascript og som erstatning, men intet af det virkede...

Bruger #345 @ 14.08.08 17:54

Her en lettere rettet udgave af den foroven.

Kode

<script type="text/javascript">
function toggle(lagNavn) {
    var obj = document.getElementById(lagNavn);
    if(obj)
    {
        obj.style.display=(obj.style.display=="block"?"none":"block");
        
        var imgSrc = obj.firstChild.src;
        if(imgSrc == "billeder/plus.gif")
            img.src = "billeder/minus.gif";
        else
            img.src = "billeder/plus.gif");
    }
}
</script>

Der er ingen grund til at overkomplicifere scriptet med DOM metoder. Desuden skal du lige huske at inkludere det hele i if(obj) blokken, ellers vil det fejle hvis obj er null eller undefined. Desuden bør man ikke checke for offsetHeight og så sætte display værdien. Check for den værdi man vil sætte, det gør scriptet mere sikkert for dumme fejl.

Jeg bør nok lige for god ordens skyld sige at jeg ikke har kigget på det originale script, jeg baserer det her udelukkende på svaret foroven.

Indlæg senest redigeret d. 14.08.2008 17:56 af Bruger #345

Bruger #14061 @ 14.08.08 20:57

-5

Brian:
Når jeg indsætter din kode på siden i stedet for den gamle, er der ingen ting der virker. Billederne skifter ikke, og nu bliver der ikke en gang vist underkategorierne når man klikker på teksten.
Eksempel:
www.musikipedia.dk/index1.php

Så der må være noget galt (med mig eller scriptet)?

Bruger #345 @ 14.08.08 22:24

Undskyld, det var dels en tastefejl, og så fordi jeg som sagt ikke havde set på siden.

Her er en revideret kode:

JScript kode

 <script type="text/javascript">
 function toggle(lagNavn, img) {
     var obj = document.getElementById(lagNavn);
     if(obj)
     {
         obj.style.display=(obj.style.display=="block"?"none":"block");
 
     var regex = /\/plus\.gif$/i;
 
         if(regex.test(img.src))
             img.src = "billeder/minus.gif";
         else
             img.src = "billeder/plus.gif";
     }
 }
 </script>

Som du kan se har jeg ændret funktionssignaturen ved at tilføje endnu en parameter, nemlig det billede der skal ændres. Ligeledes har jeg gjort brug af regex for at teste om det er det rigtige billede.

Kaldet til funktionen ser nu således ud:

JScript kode

 toggle('funk', this.firstChild);

Forresten, så placer koden imellem <head> og </head> eller i en seperat kodefil (er at fortrække). Ikke midt på siden, det er "dårlig stil".

Indlæg senest redigeret d. 14.08.2008 22:26 af Bruger #345

Bruger #14061 @ 14.08.08 22:46

-5

TUSIND TAK Brian! Det var lige den løsning jeg ledte efter

Jeg mangler dog stadigvæk at få svar på mit andet spørgsmål:

Er det muligt at lade menuen forblive åben, når man klikker sig videre til en af undersiderne? Dvs. at hvis jeg klikker på "Funktioner" og klikker mig ind på undersiden "Alle funktioner", så skal de fire undersider i menuen forblive synlige når jeg er på denne side.

Bruger #11328 @ 14.08.08 23:06

1.323

Det blive du nød til at gøre med dit server-side script (PHP / ASP), eller i nødstilfæld med en JavaScript cookie.

Bruger #5620 @ 15.08.08 09:17

1.500

Eller en blanding af php og javascript,

bruger AJAX til at sende beskeder til serveren når menuen ændrer sig, og PHP på serveren har så en SESSION variable der er menuens tilstand som opdateres for hver besked, når siden så reloades laves menuen ved at bruges session variablen til enten at folde menu items ud eller ej.

<< < 1 2 > >>

Menu: billede skal skifte ved klik

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler