Menu riducibile [compatibilità]

[tritolo86]

E' molto che no mastico JS anche perchè mi sono dedicato allo sviluppo di Applicazioni Win...

Mi trovo a dover creare un menù per un sito, questo è uno dei classici menù le cui sezioni possono nascondere/visualizzare i propri Item cliccando sul nome della sezione.

+ Sezione1
 - item1
 - item2
 - item3
+ Sezione2
 - item1
 - item2
 - item3

in breve
cliccando su sezione1 i primi 3 item spariscono ma se si cliccka un'altra volta ricompaiono.

per fare questo, metto i gruppi di item inun tag <div> con id specificato, ma poi non so che funzione usare da mettere sull'OnClick del DIV della riga della sezione1 per settare la visibility del gruppo di item alternativamente su Hidden e su Visible.

Mi aiutate?

Vorrei anche sapere poi, se questo script potrà compatibile con tutit i Browser o solo con alcuni e quindi altri visulizzeranno perennemente le sezioni tutte aperte.

Grazie e scusate il post lungo!

Ciao!

[Xinod]

http://www.constile.org/DHTML/menu_ad_albero/
la compatibilità è buona, mi sembra ci siano problemi solo con opera trai browser moderni
ciao

[tritolo86]

Lo script ch cercavo era + o meno quello, a me bastava la sintassi del If then Else in JS...

MA non ci siamo al 100% perchè ne mio menù il "+" delle sezioni è una freccettina che, quando il menù è chiuso deve essere rivolta verso il basso e quando è aperta verso destra.

possiedo entrambe le immagini ma non riesco a swapparle...

cioè, non so quale tag modificare.

ecco il codice che ho provato e che funziona solo in parte, cioè funziona solo l'apertura/chiususra delle sezioni:

///QUESTO NELL'HEAD
function mymenu(ID,nimg) {
var menu = document.getElementById(ID);
var img = document.getElementById(nimg);
var display = menu.style.display;
var img_src = img.src;
menu.style.display = (display == "block") ? "none" : "block";
img.src = (img_src == "/grafs/vd.gif") ? "/grafs/vb.gif" : "/grafs/vd.gif";
}

///QUESTO NELL'HTML
[img]vd.gif[/img]Sezione1

<div id="sez1" style="display:hidden">
///tabella con i vari item
Item 1
item2
item3
/// fine tabella con item
</div>

Credo proprio che siano gli img.src a dare problemi, cioè, per ottenere/impostare la src dell'immagine CHE DOVREI USARE??????

CIAO!

[Xinod]

sì, il problema è quello,
aggiungi un alert(img_src) e vedi cosa restituisce

mi sa che è il caso di porre un if else sul display (però occhio a chiamare le var come le proprietà o come i tag, img) e cambiare display e immagine di conseguenza
ciao

[tritolo86]

mi sa che è il caso di porre un if else sul display (però occhio a chiamare le var come le proprietà o come i tag, img) e cambiare display e immagine di conseguenza
ciao

non ho mica capito questa parte?

io volevo sapere come ottenere/impostare la proprietà src dei tag img che voglio...

Grazie!

[Xinod]

e va bene come hai fatto
ma l' alert cosa restituisce?
il percorso che restituisce è identico a quello con cui fai la prova?

io dicevo

if(display=="block"){
  menu.style.display ="none"
  img.src="immagine_chiusa.gif"
}
else {
  menu.style.display ="block"
  img.src="immagine_aperta.gif"
}

ok?

[tritolo86]

ok, senti


il mio script finale è questo e funziona benissimo...

non sono sicuro però della piena compatibilità con tutti...

mi puoi dire con che browser nn è compatibile questo script?

function mmenu(ID,nimg) {

var menu = document.getElementById(ID);
var img = document.getElementById(nimg);
var display = menu.style.display;
var imgvd = "a.gif"
var imgvb = "b.gif"
var imgnow=img.src;
menu.style.display = (display == "block") ? "none" : "block";

if(display=="block"){
  img.src=imgvd
}
else {
  img.src=imgvb
}

}

Inoltre, vorrei farti una domanda:

questo pezzo di codice
menu.style.display = (display == "block") ? "none" : "block";

non sarebbe un costrutto if else in formato ridotto???

se si, come mai non funzionava quando scrivevo

imgnow = (imgnow == imgvd) ? imgvb : imgvd;
img.src=imgnow

?????

Grazie!

Ciao!

[Xinod]

Originariamente inviato da tritolo86
mi puoi dire con che browser nn è compatibile questo script?

in linea di massima restano fuori IE4 e NN4,
i browser moderni li copri tutti

questo pezzo di codice
menu.style.display = (display == "block") ? "none" : "block";

non sarebbe un costrutto if else in formato ridotto???

sì, è un if else con operatore ternario

come mai non funzionava quando scrivevo

imgnow = (imgnow == imgvd) ? imgvb : imgvd;
img.src=imgnow

ripeto x la terza volta:
fai un alert(img.src) e vedi cosa restituisce
se restituisce precisamente "a.gif" o "b.gif" allora non c' è motivo per cui non funzioni

se come penso restituisce il percorso completo dell' immagine
un controllo del genere non sarà mai verificato
imgnow = (imgnow == imgvd) ? imgvb : imgvd;
img.src=imgnow

detto a parole:
era imgvd, non è uguale a imgnow, l' img.src diventa imgvd
= sembra non cambiare nulla, in realtà lo swap c' è stato ma con la stessa immagine

già hai constatato che per toglierti da questi impicci basta far dipendere lo swap d' immagine dallo stato del display e non dal percorso
se proprio vuoi farlo così puoi, x es., testare la presenza del nome del file come sottostringa del percorso

imgnow = (imgnow.indexOf(imgvd)>-1) ? imgvb : imgvd;
img.src=imgnow

ciao

[tritolo86]

grazie,

scusa se nn l'ho detto prima, ma io l'alert l'avevo messo e restituiva esattamente "a.gif"...

io avevo paura che sbagliassi qualcosa nel costrutto... cmq penso che sia qualcosa di logico, sicuramente coem dici tu lo swap c'era ma con la stessa img...

Ultima domanda, non c'è nulla per farlo diventare compatibile con IE4 e NN4 ???

Grazie!!

Ciao!