Newsgroup: it.comp.lang.javascript
Titolo: quando si apre una categoria le altre dovrebbero chiudersi

Vorrei usare in un sito web un menù ad albero,
ne ho trovati diversi ma tutti non hanno una cosa per me fondamentale,
quando si clicca su una categoria questa si espande mentre le altre si
dovrebbero chiudere...
ho trovato questa pagina e il js che viene utilizzato mi sembra il più
semplice ma non saprei da dove cominciare per modifcarlo e fare quello
che ho scritto sopra...
qualch'uno ci ha già lavorato su una cosa del genere
http://www.constile.org/DHTML/menu_ad_albero/menu_ad_albero.html
Ciao e Grazie a tutti
Filippo

 
http://www.constile.org/DHTML/menu_ad_albero/menu_ad_albero.html
La cosa migliore in questi casi, è chiedere direttamente all'autore dello
script. Questo per giunta è italiano, quindi ti sarà facile. La modifica,
comunque, non è di per sè complessa.
-- 
ZER0 
~ "Nei film americani, qualsiasi problema che venga considerato
sufficientemente catastrofico, puo' essere risolto facendo esplodere uno
o piu' ordigni nucleari" (ZER0 & Cosimo)

 ha scritto nel messaggio
news:1121410989....@o13g2000cwo.googlegroups.com...


Ho fatto in modo che si chiudano i menù non interessati controllando
che il i primi due caratteri del parametro passato siano diversi
in questo modo usi per esempio 01 per la categoria principale
01-01 oppure 0101 e poi 01-01-01 ecc... per le sottocategorie
e per i rami sempre in quell'if controllo la lunghezza del parametro
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" lang="it">
<head>
<title>.ConStile | DHTML | Menu ad albero in JS/CSS: esempio</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"
/>
<style type="text/css">
<!--
body {
	font: .80em verdana, helvetica, sans-serif;
}
ul {
	list-style: disc url(doc.gif);
	margin:0;padding:0 2em;
}
li.menu { list-style: square url(cartellachiusa.gif); }
-->
</style>
<script type="text/javascript">
<!--
function mmenu(mID) {
	var menu = document.getElementById(mID);
	var display = menu.style.display;
    var uls = document.getElementsByTagName("ul");
	for (i=0;i<uls.length;i++)
	{
	 if( uls[i].id.substring(0,2) != mID.substring(0,2) || (mID.length <
uls[i].id.length ))
	 {
  	  if(uls[i].className=="submenu")uls[i].style.display = "none";
     }
	}
	menu.style.display = (display == "block") ? "none" : "block";
	menu.parentNode.style.listStyleImage = (display == "block") ?
"url(cartellachiusa.gif)" : "url(cartellaaperta.gif)";
}
window.onload = function() {
	var uls = document.getElementsByTagName("ul");
	for (i=0;i<uls.length;i++) {
		if(uls[i].className=="submenu")uls[i].style.display = "none";
	}
}
//-->
</script>
</head>
<body>
<ul>
<li class="menu"><a href="javascript:mmenu('01')">Canale 1</a>
	<ul class="submenu" id="01">
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li class="menu"><a href="javascript:mmenu('01-01')">Sotto menu
Canale 1</a>
			<ul class="submenu" id="01-01">
				<li><a href="#">Link s1.1</a></li>
				<li><a href="#">Link s1.2</a></li>
				<li><a href="#">Link s1.3</a></li>
				<li><a href="#">Link s1.4</a></li>
				<li class="menu"><a href="javascript:mmenu('01-01-01')">Sotto Sotto
menu Canale 1</a>
					<ul class="submenu" id="01-01-01">
						<li><a href="#">Link s1.1.1</a></li>
						<li><a href="#">Link s1.1.2</a></li>
						<li><a href="#">Link s1.1.3</a></li>
						<li><a href="#">Link s1.1.4</a></li>
					</ul>
				</li>
				<li><a href="#">Link s1.5</a></li>
			</ul>
		</li>
	</ul>
</li>
<li class="menu"><a href="javascript:mmenu('02')">Canale 2</a>
	<ul class="submenu" id="02">
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li class="menu"><a href="javascript:mmenu('02-01')">Sotto menu
Canale 2</a>
			<ul class="submenu" id="02-01">
				<li><a href="#">Link s1.1</a></li>
				<li><a href="#">Link s1.2</a></li>
			</ul>
		</li>
		<li class="menu"><a href="javascript:mmenu('02-02')">Sotto menu
Canale 2</a>
			<ul class="submenu" id="02-02">
				<li><a href="#">Link s1.1</a></li>
				<li><a href="#">Link s1.2</a></li>
				<li><a href="#">Link s1.3</a></li>
			</ul>
		</li>
	</ul>
</li>
<li class="menu"><a href="javascript:mmenu('03')">Canale 3</a>
	<ul class="submenu" id="03">
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	</ul>
</li>
</ul>
</body>
</html>