menù espandibile usando js .. e i metodi DOM

aneres · 19 Mar 2012

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 · 19 Mar 2012

ciao,
avevi gia visto questo?

http://forum.mrwebmaster.it/javascript/28904-problema-men-espandibile.html

potresti prendere spunto

aneres · 19 Mar 2012

criric ha scritto:
ciao,
avevi gia visto questo?

http://forum.mrwebmaster.it/javascript/28904-problema-men-espandibile.html

potresti prendere spunto

sì già visto ma è un programma troppo complicato nè cercavo uno più semplice ...basilare.. senza array e senza niente..

criric · 19 Mar 2012

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>

aneres · 19 Mar 2012

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>

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

criric · 19 Mar 2012

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

aneres · 19 Mar 2012

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

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

aneres · 20 Mar 2012

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

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>

criric · 20 Mar 2012

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 · 21 Mar 2012

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:

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

menù espandibile usando js .. e i metodi DOM

aneres

Nuovo Utente

criric

Super Moderatore

aneres

Nuovo Utente

criric

Super Moderatore

aneres

Nuovo Utente

criric

Super Moderatore

aneres

Nuovo Utente

aneres

Nuovo Utente

criric

Super Moderatore

max_400

Utente Attivo

Discussioni simili

menù espandibile usando js .. e i metodi DOM

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Super Moderatore

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency