menù espandibile usando js .. e i metodi DOM

  • Creatore Discussione Creatore Discussione aneres
  • Data di inizio Data di inizio
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
 
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>
 
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?
 
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 :-)
 
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:
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:
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
 
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

S
problema menù espandibile
Risposte
1
Visite
2K
Javascript
criric
criric
F
Piccolo Problema menù espandibile toogle
Risposte
6
Visite
2K
Javascript
atahualpa
A
G
aiuto menù espandibile javascript
Risposte
3
Visite
2K
Javascript
gio^_^
G
G
Elementi Menù orizzontali
Risposte
2
Visite
1K
HTML e CSS
Gae
G
psikolele
Dropdown menù
Risposte
2
Visite
1K
HTML e CSS
psikolele
psikolele
G
Menù a tendina di ricerca con query
Risposte
1
Visite
2K
PHP
macus_adi
macus_adi
F
menù select dinamico da db in php
Risposte
3
Visite
2K
PHP
zorro
zorro
L
Menù con switch case
Risposte
1
Visite
1K
C/C++
marino51
marino51
J
Richiama descrizione da menù
Risposte
11
Visite
1K
PHP
illiterate2020
I
Z
Menù di navigazione responsivo
Risposte
0
Visite
1K
HTML e CSS
zanzarabeo
Z
R
Barra del menù principale decentrata
Risposte
4
Visite
4K
Joomla
rimade-56
R
M
Stringa con spazi nel menù a tendina
Risposte
4
Visite
2K
PHP
Max61
M
A
Menù a tendina collegato a database
Risposte
13
Visite
3K
PHP
AndreaBet
A
D
Aumentare i sublevel del menù del theme
Risposte
1
Visite
1K
Webdesign e Grafica
Max 1
Max 1
Tommy03
Contenitore non si nasconde dietro al menù
Risposte
1
Visite
937
HTML e CSS
WmbertSea
WmbertSea
Tommy03
Due menù nella stessa app
Risposte
0
Visite
1K
Sviluppo app per Android
Tommy03
Tommy03
V
Menù CSS da file in cartella esterna
Risposte
4
Visite
2K
HTML e CSS
Veronica_
V
W
[Javascript] [HTML] menù responsive fisso
Risposte
2
Visite
2K
Javascript
wolfland
W
S
[PHP] menù a tendina che stampi voce scelta in precedenza
Risposte
1
Visite
2K
PHP
Max 1
Max 1
F
[HTML] Responsive menù
Risposte
0
Visite
2K
CMS (Content Management System)
Fabio90
F
Alto Basso