menù espandibile usando js .. e i metodi DOM

A

aneres

Nuovo Utente
27 Feb 2012
21
0
0
ciao dovrei fare un menù espandibile con js usando i metodi DOM .. (getElementById....appendChild)
..è un menù in cui devo inserire le materie scolastiche...(es matematica)..cliccando sopra di esse dovrà apparire un sotto menù con i nomi dei prof che insegnano tale materia... quando clicco nuovamente sulla materia(matematica) il sotto menù deve chiudersi..mi aiutate ? sono stata assente alle lezioni e non so come muovermi..grazie
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
che ne pensi di questo esempio?

HTML: 
<script type="text/javascript">
    function apriChiudi(num){
    
        for(var i=0;i<3;i++){        
            if(i == num){
                
                if(document.getElementById("categoria_"+i).style.display == "inline") {
                    document.getElementById("categoria_"+i).style.display="none";                    
                }else{
                    document.getElementById("categoria_"+i).style.display="inline";
                }
            }
            else document.getElementById("categoria_"+i).style.display="none";
        }
    }  
   
</script>
<style type="text/css">
    li {
        cursor:pointer;
    }
    .nascosto {
        display:none;
    }
</style>
<ul>
    <li onclick="apriChiudi(0)">CATEGORIA 0
        <ul class="nascosto" id="categoria_0">
            <li>Nome 0</li>
            <li>Nome 0</li>
            <li>Nome 0</li>
            <li>Nome 0</li>
        </ul>
    </li>
    <li onclick="apriChiudi(1)">CATEGORIA 1
        <ul class="nascosto" id="categoria_1">
            <li>Nome 1</li>
            <li>Nome 1</li>
            <li>Nome 1</li>
            <li>Nome 1</li>
        </ul>
    </li>
    <li onclick="apriChiudi(2)">CATEGORIA 2
        <ul class="nascosto" id="categoria_2">
            <li>Nome 2</li>
            <li>Nome 2</li>
            <li>Nome 2</li>
            <li>Nome 2</li>
        </ul>
    </li>
</ul>
 
A

aneres

Nuovo Utente
27 Feb 2012
21
0
0
criric ha scritto:
che ne pensi di questo esempio?

HTML: 
<script type="text/javascript">
    function apriChiudi(num){
    
        for(var i=0;i<3;i++){        
            if(i == num){
                
                if(document.getElementById("categoria_"+i).style.display == "inline") {
                    document.getElementById("categoria_"+i).style.display="none";                    
                }else{
                    document.getElementById("categoria_"+i).style.display="inline";
                }
            }
            else document.getElementById("categoria_"+i).style.display="none";
        }
    }  
   
</script>
<style type="text/css">
    li {
        cursor:pointer;
    }
    .nascosto {
        display:none;
    }
</style>
<ul>
    <li onclick="apriChiudi(0)">CATEGORIA 0
        <ul class="nascosto" id="categoria_0">
            <li>Nome 0</li>
            <li>Nome 0</li>
            <li>Nome 0</li>
            <li>Nome 0</li>
        </ul>
    </li>
    <li onclick="apriChiudi(1)">CATEGORIA 1
        <ul class="nascosto" id="categoria_1">
            <li>Nome 1</li>
            <li>Nome 1</li>
            <li>Nome 1</li>
            <li>Nome 1</li>
        </ul>
    </li>
    <li onclick="apriChiudi(2)">CATEGORIA 2
        <ul class="nascosto" id="categoria_2">
            <li>Nome 2</li>
            <li>Nome 2</li>
            <li>Nome 2</li>
            <li>Nome 2</li>
        </ul>
    </li>
</ul>
Clicca per allargare...

sì potrebbe andare.. si puà fare anche senza un ciclo for?...il css posso levarlo nel caso?
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Senza ciclo e senza css
HTML: 
<script type="text/javascript">   
    
    function apriChiudi(num){        
            
        if(num == "categoria_0"){                
            if(document.getElementById("categoria_0").style.display == "inline") {
                document.getElementById("categoria_0").style.display="none";                    
            }else{
                document.getElementById("categoria_0").style.display="inline";
                document.getElementById("categoria_1").style.display="none";
                document.getElementById("categoria_2").style.display="none";
            }
        }
        if(num == "categoria_1"){                
            if(document.getElementById("categoria_1").style.display == "inline") {
                document.getElementById("categoria_1"+i).style.display="none";                    
            }else{
                document.getElementById("categoria_1").style.display="inline";
                document.getElementById("categoria_0").style.display="none";
                document.getElementById("categoria_2").style.display="none";
            }
        }
        if(num == "categoria_2"){                
            if(document.getElementById("categoria_2").style.display == "inline") {
                document.getElementById("categoria_2"+i).style.display="none";                    
            }else{
                document.getElementById("categoria_2").style.display="inline";
                document.getElementById("categoria_0").style.display="none";
                document.getElementById("categoria_1").style.display="none";
            }
        }
        
    }

   
</script>
<ul>
    <li onclick="apriChiudi('categoria_0')">CATEGORIA 0
        <ul id="categoria_0">
            <li>Nome 0</li>
            <li>Nome 0</li>
            <li>Nome 0</li>
            <li>Nome 0</li>
        </ul>
    </li>
    <li onclick="apriChiudi('categoria_1')">CATEGORIA 1
        <ul id="categoria_1">
            <li>Nome 1</li>
            <li>Nome 1</li>
            <li>Nome 1</li>
            <li>Nome 1</li>
        </ul>
    </li>
    <li onclick="apriChiudi('categoria_2')">CATEGORIA 2
        <ul id="categoria_2">
            <li>Nome 2</li>
            <li>Nome 2</li>
            <li>Nome 2</li>
            <li>Nome 2</li>
        </ul>
    </li>
</ul>
<script type="text/javascript">
    document.getElementById("categoria_0").style.display="none";
    document.getElementById("categoria_1").style.display="none";
    document.getElementById("categoria_2").style.display="none";
</script>

personalmente lo preferivo prima :)
 
A

aneres

Nuovo Utente
27 Feb 2012
21
0
0
criric ha scritto:
Senza ciclo e senza css
HTML: 
<script type="text/javascript">   
    
    function apriChiudi(num){        
            
        if(num == "categoria_0"){                
            if(document.getElementById("categoria_0").style.display == "inline") {
                document.getElementById("categoria_0").style.display="none";                    
            }else{
                document.getElementById("categoria_0").style.display="inline";
                document.getElementById("categoria_1").style.display="none";
                document.getElementById("categoria_2").style.display="none";
            }
        }
        if(num == "categoria_1"){                
            if(document.getElementById("categoria_1").style.display == "inline") {
                document.getElementById("categoria_1"+i).style.display="none";                    
            }else{
                document.getElementById("categoria_1").style.display="inline";
                document.getElementById("categoria_0").style.display="none";
                document.getElementById("categoria_2").style.display="none";
            }
        }
        if(num == "categoria_2"){                
            if(document.getElementById("categoria_2").style.display == "inline") {
                document.getElementById("categoria_2"+i).style.display="none";                    
            }else{
                document.getElementById("categoria_2").style.display="inline";
                document.getElementById("categoria_0").style.display="none";
                document.getElementById("categoria_1").style.display="none";
            }
        }
        
    }

   
</script>
<ul>
    <li onclick="apriChiudi('categoria_0')">CATEGORIA 0
        <ul id="categoria_0">
            <li>Nome 0</li>
            <li>Nome 0</li>
            <li>Nome 0</li>
            <li>Nome 0</li>
        </ul>
    </li>
    <li onclick="apriChiudi('categoria_1')">CATEGORIA 1
        <ul id="categoria_1">
            <li>Nome 1</li>
            <li>Nome 1</li>
            <li>Nome 1</li>
            <li>Nome 1</li>
        </ul>
    </li>
    <li onclick="apriChiudi('categoria_2')">CATEGORIA 2
        <ul id="categoria_2">
            <li>Nome 2</li>
            <li>Nome 2</li>
            <li>Nome 2</li>
            <li>Nome 2</li>
        </ul>
    </li>
</ul>
<script type="text/javascript">
    document.getElementById("categoria_0").style.display="none";
    document.getElementById("categoria_1").style.display="none";
    document.getElementById("categoria_2").style.display="none";
</script>

personalmente lo preferivo prima :)
Clicca per allargare...

domani provo entrambi.. è che principalmente lo volevo basilare semplice per capirlo.. :) grazie mille ti saprò dire!
è possibile farlo senza if ????
 
Ultima modifica:
A

aneres

Nuovo Utente
27 Feb 2012
21
0
0
criric ha scritto:
Senza ciclo e senza css
HTML: 
<script type="text/javascript">   
    
    function apriChiudi(num){        
            
        if(num == "categoria_0"){                
            if(document.getElementById("categoria_0").style.display == "inline") {
                document.getElementById("categoria_0").style.display="none";                    
            }else{
                document.getElementById("categoria_0").style.display="inline";
                document.getElementById("categoria_1").style.display="none";
                document.getElementById("categoria_2").style.display="none";
            }
        }
        if(num == "categoria_1"){                
            if(document.getElementById("categoria_1").style.display == "inline") {
                document.getElementById("categoria_1"+i).style.display="none";                    
            }else{
                document.getElementById("categoria_1").style.display="inline";
                document.getElementById("categoria_0").style.display="none";
                document.getElementById("categoria_2").style.display="none";
            }
        }
        if(num == "categoria_2"){                
            if(document.getElementById("categoria_2").style.display == "inline") {
                document.getElementById("categoria_2"+i).style.display="none";                    
            }else{
                document.getElementById("categoria_2").style.display="inline";
                document.getElementById("categoria_0").style.display="none";
                document.getElementById("categoria_1").style.display="none";
            }
        }
        
    }

   
</script>
<ul>
    <li onclick="apriChiudi('categoria_0')">CATEGORIA 0
        <ul id="categoria_0">
            <li>Nome 0</li>
            <li>Nome 0</li>
            <li>Nome 0</li>
            <li>Nome 0</li>
        </ul>
    </li>
    <li onclick="apriChiudi('categoria_1')">CATEGORIA 1
        <ul id="categoria_1">
            <li>Nome 1</li>
            <li>Nome 1</li>
            <li>Nome 1</li>
            <li>Nome 1</li>
        </ul>
    </li>
    <li onclick="apriChiudi('categoria_2')">CATEGORIA 2
        <ul id="categoria_2">
            <li>Nome 2</li>
            <li>Nome 2</li>
            <li>Nome 2</li>
            <li>Nome 2</li>
        </ul>
    </li>
</ul>
<script type="text/javascript">
    document.getElementById("categoria_0").style.display="none";
    document.getElementById("categoria_1").style.display="none";
    document.getElementById("categoria_2").style.display="none";
</script>

personalmente lo preferivo prima :)
Clicca per allargare...

oltre a togliere il for è possibile togliere anche l'if?
e poi il menù ,l'ho capito solo oggi ,deve praticamente avere nell'html solo le cose principali esempio:matematica..nello js attraverso appendChild , createTextNode etc..bisogna la sotto categoria...
ti faccio un esempio..preso da un mio compagno..io avrei voluto farlo diversamente se c'era il modo.

HTML: 
<body>
<ol>
<li id="l1" onclick="Sistemi()">Sistemi</li>
<li id="l2" onclick="info()">Informatica</li>
<li id="l3" onclick="mate()">Matematica</li>
</ol>


</body>


<script>
function Sistemi(){
nodo = document.getElementById("l1");
lista = document.createElement("UL");
par1 = document.createElement("li");
testo = document.createTextNode("Bertagnin");
par1.appendChild(testo);
lista.appendChild(par1);
par2 = document.createElement("li");
testo2 = document.createTextNode("Cenacchi");
par2.appendChild(testo2);
lista.appendChild(par2);
nodo.appendChild(lista);
l1.setAttribute("onclick","chiudiSis()");

}

function info(){
lista2 = document.createElement("UL");
nodo2 = document.getElementById("l2");
par2 = document.createElement("li");
testo2 = document.createTextNode("Savarese");
par2.appendChild(testo2);
lista2.appendChild(par2);
par3 = document.createElement("li");
testo3 = document.createTextNode("Fava");
par3.appendChild(testo3);
lista2.appendChild(par3);
nodo2.appendChild(lista2);
l2.setAttribute("onclick","chiudiInfo()");

}

function mate(){
lista3 = document.createElement("UL");
nodo3 = document.getElementById("l3");
par3 = document.createElement("li");
testo3 = document.createTextNode("Valzania");
par3.appendChild(testo3);
lista3.appendChild(par3);
par4 = document.createElement("li");
testo4 = document.createTextNode("Fava");
par4.appendChild(testo4);
lista3.appendChild(par4);
nodo3.appendChild(lista3);
l3.setAttribute("onclick","chiudiMate()");

}

function chiudiSis(){

lista.style.visibility = "hidden";
lista.style.display = "none";
l1.setAttribute("onclick","Sistemi()");

}

function chiudiInfo(){

lista2.style.visibility = "hidden";
lista2.style.display = "none";
l2.setAttribute("onclick","info()");

}

function chiudiMate(){

lista3.style.visibility = "hidden";
lista3.style.display = "none";
l3.setAttribute("onclick","mate()");

}
</script>
 
Ultima modifica di un moderatore:
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, non ho mai usato quei metodi, sono un javascripter scarso e autodidata.

Proverò a dargli un occhiata stasera magari qualcuno ti risponde prima

ciao
 
max_400

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
Discussione doppia e tag CODE

Utente Aneres, utilizza il tag code o qualsiasi altro tag per inglobare il tuo codice
ne abbiamo 3 a disposizione:

barra-di-formattazione.jpg


inoltre hai una discussione molto simile...il codice è uguale?
c'è qualke differenza con questa?

Se è uguale devo cancellarla (tra l'altro non ci sono neanche risposte)
Se c'è differenza specifica meglio il titolo.

Buona continuazione.

Er Moderator
by Max_400
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
S problema menù espandibile Javascript 1
F Piccolo Problema menù espandibile toogle Javascript 6
G aiuto menù espandibile javascript Javascript 3
G Elementi Menù orizzontali HTML e CSS 2
psikolele Dropdown menù HTML e CSS 2
G Menù a tendina di ricerca con query PHP 1
F menù select dinamico da db in php PHP 3
L Menù con switch case C/C++ 1
J Richiama descrizione da menù PHP 11
Z Menù di navigazione responsivo HTML e CSS 0
R Barra del menù principale decentrata Joomla 4
M Stringa con spazi nel menù a tendina PHP 4
A Menù a tendina collegato a database PHP 13
D Aumentare i sublevel del menù del theme Webdesign e Grafica 1
Tommy03 Contenitore non si nasconde dietro al menù HTML e CSS 1
Tommy03 Due menù nella stessa app Sviluppo app per Android 0
C [PHP] Form con Inserimento dati dalla maschera e un menù a discesa che prende i dati dal db PHP 1
C [PHP] Form inserimento più menù a discesa PHP 9
V Menù CSS da file in cartella esterna HTML e CSS 4
W [Javascript] [HTML] menù responsive fisso Javascript 2
S [PHP] menù a tendina che stampi voce scelta in precedenza PHP 1
F [HTML] Responsive menù CMS (Content Management System) 0
A [PHP] menù con links esterni PHP 6
D Come inserire opzioni menù prelevandole dal database con PHP ? PHP 12
F [HTML] li menù width HTML e CSS 3
T [Javascript] un form con select dinamica che funzioni da menù... Javascript 2
ecosito [Wordpress] La barra del menù mi nasconde la parte alta delle pagine WordPress 0
greven [WordPress] [CSS3] Inserire Hover Effect sul menù WordPress 10
F Problema hover voce di menù Javascript 2
F Nascondere menù onclick sottovoce jQuery 0
F Active menù HTML e CSS 2
A menù a tendina aiuto PHP 1
M Menù a tendina editabile HTML e CSS 0
P problema con tendina del menù, scompare sotto i contenuti HTML e CSS 7
F Link menù attivo categoria PHP 2
MarcoGrazia Breadcrumbs, menù a briciole di pane Snippet PHP 2
I nav menù HTML e CSS 13
LuigiDonato Problema Visualizzazione Menù HTML e CSS 17
C Menù scomparso WordPress 2
V Posizionare Iframe e menù a discesa HTML e CSS 1
F z-index menù HTML e CSS 4
Tommi Script per menù Javascript 16
Licantropo esportare tags e menù Joomla 0
F Menù a tendina Joomla 4
L [PHP] 3 menù Select OPTION consecutivi PHP 1
Carlito's Menù jQuery 1
E Menù da modificare HTML e CSS 2
H Menù a discesa contenente dati db, la scelta dal menù deve essere inviata in un altro db. PHP 1
andreaco Problema menù a scomparsa laterale HTML e CSS 10
L Inserisco 2 menù e vedo sempre il primo PHP 0

Discussioni simili

Alto Basso