gerarchia

**Claudio Vituzzi** · 01-06-2005, 14:07

Salve,

Sto cercando di riprodurre in modo grafico una gerarchia tramite la classica cartella che contiene altre cartelle e cosi' via. Tuttavia ho dei problemi con il seguente codice ovvero se faccio apparire un div-figlio e scomparire un div-padre il div figlio rimane in mostra comunque ... ecco il codice:

codice:

<html><head><title>Javascript</title>
<style type="text/css">
<!--
ul, li {
	font: 11px Arial;
	list-style-type: disc;
}
//-->
</style>
<script language="javascript1.2">
<!--

var oggetto = new Array();

function my_layer(whichLayer)
{
	if ( oggetto[whichLayer] )
	{

		if (document.getElementById) {
			document.getElementById(whichLayer).style.visibility = "visible";
		} else if (document.all) {
			document.all[whichLayer].style.visibility = "visible";
		}
		oggetto[whichLayer] = false;

	} else {

		if (document.getElementById) {
			document.getElementById(whichLayer).style.visibility = "hidden";
		} else if (document.all) {
			document.all[whichlayer].style.visibility = "hidden";
		}
		oggetto[whichLayer] = true;

	}
}
//-->
</script>
</head>
<body>
1

<div id="layer_1" style="padding-left: 30px;">

	1_1

	1_2

	<div id="layer_1_2" style="padding-left: 30px;">
	
		1_2_1

		
	</div>
	1_3

	
</div>
</body></html>

Grazie!

**badaze** · 01-06-2005, 15:03

Il problema è che non hai definito cosa sia la gerarchia. Mi spiego.
Per ogni livello non hai definito cosa sia un sotto menu o una voce di menu finale.

Ho modificato il tuo script per avere sempre la stessa struttura per un livello di menu. Ossia un livello di menu è composto da :

codice:

 un <div>
   un <a>
   tra 0 e n altri sotto livelli

Cosi ottieni una struttura che sarà semplice automatizzare con un liguaggio lato server.

Ecco il codice

codice:

<html><head><title>Javascript</title>

<style type="text/css">
<!--
 div {display:block}
-->
</style>


<script language="javascript1.2">
<!--

var oggetto = new Array();

function hideFrom(whichLayer) {
 if (document.getElementById(whichLayer) == null ) {
  return;
 }
 var oColl = document.getElementById(whichLayer).children;
 var i     = 0;
 for (i=0;i<oColl.length;i++) {
	var curObj = oColl.item(i);
	if (curObj.tagName == "DIV") {
   document.getElementById(curObj.id).style.display = "none";
	 oggetto[whichLayer] = true;
	 hideFrom(curObj.id);
	} 
 }
}

function showNextLevel(whichLayer) {
 if (document.getElementById(whichLayer) == null ) {
  return;
 }
 var oColl = document.getElementById(whichLayer).children;
 var i     = 0;
 for (i=0;i<oColl.length;i++) {
  var curObj = oColl.item(i);
  if (curObj.tagName == "DIV") {
   document.getElementById(curObj.id).style.display = "block";
   oggetto[whichLayer] = false;
  } 
 }
}

function my_layer(whichLayer,hide) {
	if ( oggetto[whichLayer] )
	{
		showNextLevel(whichLayer);
	} else {
		hideFrom(whichLayer);
	}
}
//-->
</script>
</head>
<body>

<div id="layer_1" style="padding-left: 30px;">
 1

 
 
 <div id="layer_1_1" style="padding-left: 30px;">
	1_1

	
	 
   <div id="layer_1_1_1" style="padding-left: 30px;"> 
		1_1_1

	 </div>
	 
	 
   <div id="layer_1_1_2" style="padding-left: 30px;"> 
		1_1_2

	 </div>	 	
	
 </div>
 
 
 <div id="layer_1_2" style="padding-left: 30px;"> 
	1_2

	
	 
   <div id="layer_1_2_1" style="padding-left: 30px;"> 
		1_2_1

	 </div>
	</div>
	
 	
 <div id="layer_1_3" style="padding-left: 30px;"> 
		1_3

 </div>	
</div>
</body></html>

Un'ultima cosa. Cosi funziona solo per IE e forse Firefox.

**Claudio Vituzzi** · 02-06-2005, 17:45

Perfetto!

ma come faccio a fare apparrire tutte le cartelle già chiuse?

ciao e grazie!

**badaze** · 02-06-2005, 18:03

Cosi...

codice:

<html><head><title>Javascript</title>

<style type="text/css">
<!--
 div {display:block}
-->
</style>


<script language="javascript1.2">
<!--

var oggetto = new Array();

function hideFrom(whichLayer) {
 if (document.getElementById(whichLayer) == null ) {
  return;
 }
 var oColl = document.getElementById(whichLayer).children;
 var i     = 0;
 for (i=0;i<oColl.length;i++) {
	var curObj = oColl.item(i);
	if (curObj.tagName == "DIV") {
   document.getElementById(curObj.id).style.display = "none";
	 oggetto[whichLayer] = true;
	 hideFrom(curObj.id);
	} 
 }
}

function showNextLevel(whichLayer) {
 if (document.getElementById(whichLayer) == null ) {
  return;
 }
 var oColl = document.getElementById(whichLayer).children;
 var i     = 0;
 for (i=0;i<oColl.length;i++) {
  var curObj = oColl.item(i);
  if (curObj.tagName == "DIV") {
   document.getElementById(curObj.id).style.display = "block";
   oggetto[whichLayer] = false;
  } 
 }
}

function showFrom(whichLayer) {
 if (document.getElementById(whichLayer) == null ) {
  return;
 }
 var oColl = document.getElementById(whichLayer).children;
 var i     = 0;
 for (i=0;i<oColl.length;i++) {
  var curObj = oColl.item(i);
  if (curObj.tagName == "DIV") {
   document.getElementById(curObj.id).style.display = "block";
   oggetto[whichLayer] = false;
	 showFrom(curObj.id);
  } 
 }
}

function my_layer(whichLayer,hide) {
	if ( oggetto[whichLayer] )
	{
		showFrom(whichLayer);
	} else {
		hideFrom(whichLayer);
	}
}
//-->
</script>
</head>
<body>

<div id="layer_1" style="padding-left: 30px;">
 1

 
 
 <div id="layer_1_1" style="padding-left: 30px;">
	1_1

	
	 
   <div id="layer_1_1_1" style="padding-left: 30px;"> 
		1_1_1

	 </div>
	 
	 
   <div id="layer_1_1_2" style="padding-left: 30px;"> 
		1_1_2

	 </div>	 	
	
 </div>
 
 
 <div id="layer_1_2" style="padding-left: 30px;"> 
	1_2

	
	 
   <div id="layer_1_2_1" style="padding-left: 30px;"> 
		1_2_1

	 </div>
	</div>
	
 	
 <div id="layer_1_3" style="padding-left: 30px;"> 
		1_3

 </div>	
</div>
</body></html>

**Claudio Vituzzi** · 02-06-2005, 21:11

Grazie, ma su un newsgroup mi è stata consigliato un codice più facile e soprattutto cross-browser, che per onor di cronaca posterò:

codice:

<html><head><title>Javascript</title>
<style type="text/css">
<!--
div {display:block}
//-->
</style>
<script language="javascript1.2">
<!--

var oggetto = new Array();

function my_layer(whichLayer)
{
   if ( oggetto[whichLayer] )
   {

      if (document.getElementById) {
         document.getElementById(whichLayer).style.display = "block";
      } else if (document.all) {
         document.all[whichLayer].style.display = "block";
      }
      oggetto[whichLayer] = false;

   } else {

      if (document.getElementById) {
         document.getElementById(whichLayer).style.display = "none";
      } else if (document.all) {
         document.all[whichlayer].style.display = "none";
      }
      oggetto[whichLayer] = true;

   }
}
//-->
</script>
</head>
<body>
1

<div id="layer_1" style="padding-left: 30px;">

   1_1

   1_2

   <div id="layer_1_2" style="padding-left: 30px;">
   
      1_2_1

      
   </div>
   1_3

   
</div>
</body></html>

Grazie!

Discussione: gerarchia

Strumenti discussione

Ricerca discussione

Visualizza

gerarchia

Permessi di invio