Aprire e chiudere menu a discesa

[Ugly Mau]

Ho questo menu a discesa

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=100; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->
</script> 

Cliccando su un testo (MENU 1) si apre il relativo sotto menu, cliccando su (MENU 2) si chiude quello di prima e si apre il 2.

<dt onclick="javascript:montre('smenu1');">MENU 1</dt>
              <dd id="smenu1">
                <ul>
            [*][url="link.htm"]link[/url][*][url="link.htm"]link[/url][*][url="negozio_quadri.htm"]link[/url][/list]
              </dd>
<dt onclick="javascript:montre('smenu2');">MENU 2</dt>
              <dd id="smenu2">
                <ul>
            [*][url="link.htm"]link[/url][*][url="link.htm"]link[/url][*][url="negozio_quadri.htm"]link[/url][/list]
              </dd> 

Fin qui tutto ok, ora vorrei solo che si potessi chiudere il sotto menu aperto cliccando nello stesso testo con cui l'ho aperto, cioè se clicco su (MENU 1) lo apro, se clicco di nuovo lo chiudo.

Sapete suggerirmi qualcosa?
Grazie

[pippuzzo80]

crei una variabile booleana (cioè che può assumere true o false e la inizializzi a true), ogni volta che clicchi su menu1 controlli la variabile, se è true allora lo apri e lo setti a false, se invece e false allora chiudi il menu e lo setti a true...

semplice...

[Ugly Mau]

window.onload=montre;
function montre(id) {

var stato = true;
if(document.getElementById('smenu1')){stato = false;}
if(stato == false){document.getElementById('smenu1').style.display='none';}

var d = document.getElementById(id);
    for (var i = 1; i<=100; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
    
if (d) {d.style.display='block';}
} 

Ho aggiunto le tre righe sopra, ovviamente non funzia

Credo che dovrei inserirlo all'interno del ciclo in modo che funzioni per tutti gli elementi e non solo per il primo. Solo che per me diventa più complicato


Grazie

[pippuzzo80]

ovviamente in questo modo devi avere una variabile booleana per ogni menu che vuoi aprire e chiudere...

[Ugly Mau]

Si, ma la modifica che ho fatto non funziona... poi farmi un esempio, non riesco a venire fuori. :master:

[Ugly Mau]

Up

[pierofix]

Ecco un'ulteriore soluzione:

XHTML

<ul id="menu">[*]
      <span>Verdura</span>
      <ul>[*]Pomodori[*]Carote[/list]
   [*]
      <span>Frutta</span>
      <ul>[*]Mele[*]Pere[/list]
   [/list]


CSS

.menu_nascosto
{
   position:absolute; top:-100px;
   width:1px; height:1px;
   overflow:hidden;
}
.menu_titolo
{
   color:blue;
   text-decoration:underline;
   cursor:pointer;
}


Javascript

window.onload = function()
{
   // Prepariamo tutti gli attori dello script
   var menu = document.getElementById('menu')
   var menu_elementi = menu.childNodes
   var sotto_menu = new Array()
      for (var i = 0; i < menu_elementi.length; i++)
      {
         if ( menu_elementi.item(i).nodeType == menu_elementi.item(i).ELEMENT_NODE )
         {
            sotto_menu.push(menu_elementi.item(i))
         }
      }
   var sotto_menu_titoli = new Array()
      for (var i = 0; i < sotto_menu.length; i++)
      {
         var titolo_corrente = sotto_menu[i].getElementsByTagName('span').item(0)
         sotto_menu_titoli.push(titolo_corrente)
      }
   var sotto_menu_voci = new Array()
      for (var i = 0; i < sotto_menu.length; i++)
      {
         var voci_corrente = sotto_menu[i].getElementsByTagName('ul').item(0)
         sotto_menu_voci.push(voci_corrente)
      }

   // Prepariamo le funzioni 'visualizza' e 'nascondi'
   function nascondi_menu(indice, menu_corrente)
   {
      sotto_menu_voci[indice].className = 'menu_nascosto'
      menu_corrente.onclick = function()
      {
         visualizza_menu(indice, menu_corrente)
      }
   }
   function visualizza_menu(indice, menu_corrente)
   {
      sotto_menu_voci[indice].className = ' '
      menu_corrente.onclick = function()
      {
         nascondi_menu(indice, menu_corrente)
      }
   }

   // Attribuiamo le funzioni ad ogni sotto-menu
   var indice_menu = 0
   for (var i = 0; i < sotto_menu_titoli.length; i++)
   {
      sotto_menu_titoli[i].onclick = function()
      {
         visualizza_menu(indice_menu, this)
         indice_menu++
      }
   }

   // Rendiamo visivamente simili a link i titoli cliccabili dei sotto-menu
   for (var i = 0; i < sotto_menu_titoli.length; i++)
   {
      sotto_menu_titoli[i].className = 'menu_titolo'
   }

   // Inizializziamo la pagina nascondendo tutti i sotto-menu
   for (var i = 0; i < sotto_menu_voci.length; i++)
   {
      sotto_menu_voci[i].className = 'menu_nascosto'
   }
}

Ti ho modificato leggermente il mark-up, proponendoti una soluzione che trovo più appropriata dal punto di vista semantico.

Da notare come questo script javascript funzioni con un numero arbitrario di sotto-menu in quanto non serve andare ad inserire attributi di evento o altre porcherie nella marcatura.

[Ugly Mau]

Grazie

Ora non ho molto tempo per provare, più tardi vedo e ti faccio sapere...

[pierofix]

Mi sono accorto di un piccolo bug. Ci penso e se ci riesco sistemo.

[pierofix]

No, niente da fare. Chiedo l'aiuto degli esperti. Ho evidenziato nello script la parte che non riesco a risolvere. Non riesco a passare la variabile 'i' alla funzione annidata 'visualizza_menu'. Come risolvere?

window.onload = function()
{
   // Prepariamo tutti gli attori dello script
   var menu = document.getElementById('menu')
   var menu_elementi = menu.childNodes
   var sotto_menu = new Array()
      for (var i = 0; i < menu_elementi.length; i++)
      {
         if ( menu_elementi.item(i).nodeType == menu_elementi.item(i).ELEMENT_NODE )
         {
            sotto_menu.push(menu_elementi.item(i))
         }
      }
   var sotto_menu_titoli = new Array()
      for (var i = 0; i < sotto_menu.length; i++)
      {
         var titolo_corrente = sotto_menu[i].getElementsByTagName('span').item(0)
         sotto_menu_titoli.push(titolo_corrente)
      }
   var sotto_menu_voci = new Array()
      for (var i = 0; i < sotto_menu.length; i++)
      {
         var voci_corrente = sotto_menu[i].getElementsByTagName('ul').item(0)
         sotto_menu_voci.push(voci_corrente)
      }

   // Prepariamo le funzioni 'visualizza' e 'nascondi'
   function nascondi_menu(indice, menu_corrente)
   {
      sotto_menu_voci[indice].className = 'menu_nascosto'
      menu_corrente.onclick = function()
      {
         visualizza_menu(indice, menu_corrente)
      }
   }
   function visualizza_menu(indice, menu_corrente)
   {
      sotto_menu_voci[indice].className = ' '
      menu_corrente.onclick = function()
      {
         nascondi_menu(indice, menu_corrente)
      }
   }

   // Attribuiamo le funzioni ad ogni sotto-menu
   for (var i = 0; i < sotto_menu_titoli.length; i++)
   {
      sotto_menu_titoli[i].onclick = function()
      {
         visualizza_menu(i, this)
      }
   }

   // Rendiamo visivamente simili a link i titoli cliccabili dei sotto-menu
   for (var i = 0; i < sotto_menu_titoli.length; i++)
   {
      sotto_menu_titoli[i].className = 'menu_titolo'
   }

   // Inizializziamo la pagina nascondendo tutti i sotto-menu
   for (var i = 0; i < sotto_menu_voci.length; i++)
   {
      sotto_menu_voci[i].className = 'menu_nascosto'
   }
}