Aprire e chiudere menu a discesa

[Xinod]

e' la stessa cosa, no?
http://forum.html.it/forum/showthrea...70#post9686670

[pierofix]

Originariamente inviato da Xinod
e' la stessa cosa, no?
http://forum.html.it/forum/showthrea...70#post9686670

Uuu, grazie mille! Avevo proprio in testa quella discussione ma non la trovavo. Niente da fare, 'sta cosa non mi entra in testa. Grazie.

[pierofix]

Ma porca miseria! Non riesco ad adattare la soluzione a questo caso specifico. 'Sto ragionamento mi manda in loop la testa... 'Iuto.

[Xinod]

a parte il problema contingente perche' ti ostini a tenere una funziona anonima che regge tutto nell' onload? secondo me non e' una buona pratica

questo
if ( menu_elementi.item(i).nodeType == menu_elementi.item(i).ELEMENT_NODE )
cambialo in questo
if ( menu_elementi.item(i).nodeType == 1)
altrimenti IE6 non ti segue

poi, cambiamenti minimi che dovrebbero bastare a rendere la cosa funzionante

window.onload = function()
{
// ...
   // Attribuiamo le funzioni ad ogni sotto-menu
   for (var i = 0; i < sotto_menu_titoli.length; i++)
   {
	var el=sotto_menu_titoli[i];
	keepRef(el,i);
   }
// ...
	function keepRef(el,idx){
		el.onclick=function(){visualizza_menu(idx, el);return false};
	}
}

ciao

[pierofix]

Originariamente inviato da Xinod
perche' ti ostini a tenere una funziona anonima che regge tutto nell' onload? secondo me non e' una buona pratica

Ah! Dici? Io ho preso questo vizio ma senza motivi sostanziali. Sono pronto a cambiare metodo di lavoro, quindi spiegami pure.

questo
if ( menu_elementi.item(i).nodeType == menu_elementi.item(i).ELEMENT_NODE )
cambialo in questo
if ( menu_elementi.item(i).nodeType == 1)
altrimenti IE6 non ti segue

Perfetto. Questo passaggio l'avevo imbastito alla svelta prendendo spunto dalla prima guida trovata online. Anche qui, cognizione di causa tendente allo zero.

poi, cambiamenti minimi che dovrebbero bastare a rendere la cosa funzionante

window.onload = function()
{
// ...
   // Attribuiamo le funzioni ad ogni sotto-menu
   for (var i = 0; i < sotto_menu_titoli.length; i++)
   {
	var el=sotto_menu_titoli[i];
	keepRef(el,i);
   }
// ...
	function keepRef(el,idx){
		el.onclick=function(){visualizza_menu(idx, el);return false};
	}
}

Grazie mille.

[pierofix]

Pertanto, il codice definitivo è il seguente.

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 == 1 )
         {
            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
   function attribuisci_visualizza(elemento,idx)
   {
      elemento.onclick = function()
      {
         visualizza_menu(idx, elemento)
         return false
      }
   }   
   for (var i = 0; i < sotto_menu_titoli.length; i++)
   {
      var elemento = sotto_menu_titoli[i];
      attribuisci_visualizza(elemento, i);
   }

   // 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'
   }
}

[Ugly Mau]

Intanto grazie mille per l'interessamento... Spero che questa giornata sia meno frenetica di ieri....


Come noto di JS sono un po' (o meglio tanto scarso), e mi sono un po' perso nella discussione.

Ho provato, ho aggiunti gli ID e messe le classi, ma non va...
Che cosa ho incasinato?

<ul id="menu">[*]
      <span class="menu_titolo">Verdura</span>
      <ul class="menu_nascosto" id="menu1">[*]Pomodori[*]Carote[/list]
   [*]
      <span class="menu_titolo">Frutta</span>
      <ul class="menu_nascosto" id="menu2">[*]Mele[*]Pere[/list]
   [/list]

[pierofix]

No no, non devi mettere le classi nel mark-up. Sono solo preparate nel CSS e attribuite poi agli elementi tramite lo script.

Questo perchè, in caso di javascript disabilitato, le liste si vedono tutte aperte e semplicemente leggibili.

[Ugly Mau]

Ancora niente, ti sembra corretto come ho messo qui sotto?

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

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

</style>
<script type="text/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
   function attribuisci_visualizza(elemento,idx)
   {
      elemento.onclick = function()
      {
         visualizza_menu(idx, elemento)
         return false
      }
   }   
   for (var i = 0; i < sotto_menu_titoli.length; i++)
   {
      var elemento = sotto_menu_titoli[i];
      attribuisci_visualizza(elemento, i);
   }

   // 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'
   }
}
</script>
</head>

<body>

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


</body>
</html>

[mrcanoa]

ma semplificare il todos????

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

.menu_nascosto
{
	display:none;
}
.menu_visibile
{
	display:block;
}

.menu_titolo
{
   color:blue;
   text-decoration:underline;
   cursor:pointer;
}

</style>
<script type="text/javascript">
function hideView(objDiv){
	appoDiv = document.getElementById(objDiv)
	appoDiv.className == "menu_nascosto" ? appoDiv.className = "menu_visibile" : appoDiv.className = "menu_nascosto"
}
</script>
</head>

<body>

<ul id="menu">[*]
      <span onclick="hideView('menu1')">Verdura</span>
      <ul id="menu1" class="menu_nascosto">[*]Pomodori[*]Carote[/list]
   [*]
      <span onclick="hideView('menu2')">Frutta</span>
      <ul id="menu2" class="menu_nascosto">[*]Mele[*]Pere[/list]
   [/list]


</body>
</html>