Menù ad albero con jQuery

**miki92** · 11-11-2014, 10.06.21

Buongiorno,
ho questo menù:

Codice HTML:

<ul class="tree dynamized" style="display: block;">
									
<li class="category_50">
	<a href="http://www.apeprocidana.it/index.php?id_category=50&amp;controller=category" title="">Cornici in legno</a>
	</li>

												
<li class="category_48">
	<span class="grower OPEN"> </span><a href="http://www.apeprocidana.it/index.php?id_category=48&amp;controller=category" class="selected" title="">Foto Gadget</a>
			<ul style="display: block;">
									
<li class="category_51">
	<a href="http://www.apeprocidana.it/index.php?id_category=51&amp;controller=category" title="">Abbigliamento</a>
	</li>

												
<li class="category_53">
	<a href="http://www.apeprocidana.it/index.php?id_category=53&amp;controller=category" title="">Accessori</a>
	</li>

												
<li class="category_54">
	<a href="http://www.apeprocidana.it/index.php?id_category=54&amp;controller=category" title="">Borse ed Accessori</a>
	</li>

												
<li class="category_55">
	<a href="http://www.apeprocidana.it/index.php?id_category=55&amp;controller=category" title="">Calamite</a>
	</li>

												
<li class="category_56">
	<a href="http://www.apeprocidana.it/index.php?id_category=56&amp;controller=category" title="">Ceramica</a>
	</li>

												
<li class="category_57">
	<a href="http://www.apeprocidana.it/index.php?id_category=57&amp;controller=category" title="">Cornici</a>
	</li>

												
<li class="category_161">
	<a href="http://www.apeprocidana.it/index.php?id_category=161&amp;controller=category" title="">Cover Cellulari e Tablets</a>
	</li>

												
<li class="category_58">
	<a href="http://www.apeprocidana.it/index.php?id_category=58&amp;controller=category" title="">Crystal</a>
	</li>

												
<li class="category_59">
	<span class="grower CLOSE"> </span><a href="http://www.apeprocidana.it/index.php?id_category=59&amp;controller=category" title="">Cuscini</a>
			<ul style="display: none;">
									
<li class="category_87">
	<a href="http://www.apeprocidana.it/index.php?id_category=87&amp;controller=category" title="">Accessori ed Extra</a>
	</li>

												
<li class="category_72">
	<a href="http://www.apeprocidana.it/index.php?id_category=72&amp;controller=category" title="Cuscini Bicolore">Bicolori</a>
	</li>

												
<li class="category_113">
	<a href="http://www.apeprocidana.it/index.php?id_category=113&amp;controller=category" title="">Doppio Full Print</a>
	</li>

												
<li class="category_112">
	<a href="http://www.apeprocidana.it/index.php?id_category=112&amp;controller=category" title="">Full Print</a>
	</li>

												
<li class="category_115">
	<a href="http://www.apeprocidana.it/index.php?id_category=115&amp;controller=category" title="">iPhone</a>
	</li>

												
<li class="category_111">
	<a href="http://www.apeprocidana.it/index.php?id_category=111&amp;controller=category" title="">Jeans</a>
	</li>

												
<li class="category_116">
	<a href="http://www.apeprocidana.it/index.php?id_category=116&amp;controller=category" title="">Mini</a>
	</li>

												
<li class="category_114 last">
	<a href="http://www.apeprocidana.it/index.php?id_category=114&amp;controller=category" title="">Squadre Calcio</a>
	</li>

							</ul>
	</li>

												
<li class="category_60">
	<a href="http://www.apeprocidana.it/index.php?id_category=60&amp;controller=category" title="">Elettronica, cellulari e informatica</a>
	</li>

												
<li class="category_85">
	<span class="grower CLOSE"> </span><a href="http://www.apeprocidana.it/index.php?id_category=85&amp;controller=category" title="">Festività</a>
			<ul style="display: none;">
												
<li class="category_151 last">
	<a href="http://www.apeprocidana.it/index.php?id_category=151&amp;controller=category" title="">Touch Screen</a>
	</li>

							</ul>
	</li>

												
<li class="category_117 last">
	<span class="grower CLOSE"> </span><a href="http://www.apeprocidana.it/index.php?id_category=117&amp;controller=category" title="">Ufficio e Lavoro</a>
			<ul style="display: none;">
									
<li class="category_123">
	<a href="http://www.apeprocidana.it/index.php?id_category=123&amp;controller=category" title="">Archiviazione</a>
	</li>

												
<li class="category_121">
	<a href="http://www.apeprocidana.it/index.php?id_category=121&amp;controller=category" title="">Articoli da Scrivania</a>
	</li>

												
<li class="category_118">
	<a href="http://www.apeprocidana.it/index.php?id_category=118&amp;controller=category" title="">Borsa Porta Pc</a>
	</li>

												
<li class="category_119">
	<a href="http://www.apeprocidana.it/index.php?id_category=119&amp;controller=category" title="">Calcolatrici da Tavolo</a>
	</li>

												
<li class="category_125">
	<a href="http://www.apeprocidana.it/index.php?id_category=125&amp;controller=category" title="">Memo Stick e Porta Memo</a>
	</li>

												
<li class="category_120">
	<a href="http://www.apeprocidana.it/index.php?id_category=120&amp;controller=category" title="">Porte USB e Mouse Ottici</a>
	</li>

												
<li class="category_122">
	<a href="http://www.apeprocidana.it/index.php?id_category=122&amp;controller=category" title="">Righelli e Stilofori</a>
	</li>

												
<li class="category_124">
	<a href="http://www.apeprocidana.it/index.php?id_category=124&amp;controller=category" title="">Tagliacarta e Fermacarta</a>
	</li>

												
<li class="category_126 last">
	<a href="http://www.apeprocidana.it/index.php?id_category=126&amp;controller=category" title="">Tappetini Mouse</a>
	</li>

							</ul>
	</li>

							</ul>
	</li>

												
<li class="category_128">
	<span class="grower CLOSE"> </span><a href="http://www.apeprocidana.it/index.php?id_category=128&amp;controller=category" title="">Premiazioni</a>
			<ul style="display: none;">
									
<li class="category_129">
	<a href="http://www.apeprocidana.it/index.php?id_category=129&amp;controller=category" title="">Astucci</a>
	</li>

												
<li class="category_130">
	<a href="http://www.apeprocidana.it/index.php?id_category=130&amp;controller=category" title="">Coppe</a>
	</li>

												
<li class="category_131">
	<a href="http://www.apeprocidana.it/index.php?id_category=131&amp;controller=category" title="">Cornici</a>
	</li>

												
<li class="category_132">
	<a href="http://www.apeprocidana.it/index.php?id_category=132&amp;controller=category" title="">Linee Special</a>
	</li>

												
<li class="category_133">
	<a href="http://www.apeprocidana.it/index.php?id_category=133&amp;controller=category" title="">Medaglie</a>
	</li>

												
<li class="category_134">
	<a href="http://www.apeprocidana.it/index.php?id_category=134&amp;controller=category" title="">Orologi</a>
	</li>

												
<li class="category_135">
	<a href="http://www.apeprocidana.it/index.php?id_category=135&amp;controller=category" title="">Outlet</a>
	</li>

												
<li class="category_136">
	<a href="http://www.apeprocidana.it/index.php?id_category=136&amp;controller=category" title="">Portachiavi</a>
	</li>

												
<li class="category_139">
	<a href="http://www.apeprocidana.it/index.php?id_category=139&amp;controller=category" title="">Supporti in Vetro</a>
	</li>

												
<li class="category_140 last">
	<a href="http://www.apeprocidana.it/index.php?id_category=140&amp;controller=category" title="">Targhe</a>
	</li>

							</ul>
	</li>

												
<li class="category_76">
	<span class="grower CLOSE"> </span><a href="http://www.apeprocidana.it/index.php?id_category=76&amp;controller=category" title="Pagina ufficiale dell'Official Store dell'Isola di Procida Calcio">Procida Calcio</a>
			<ul style="display: none;">
									
<li class="category_78">
	<a href="http://www.apeprocidana.it/index.php?id_category=78&amp;controller=category" title="Tappetino per mouse con la foto del tuo Campione">MousePad</a>
	</li>

												
<li class="category_77 last">
	<a href="http://www.apeprocidana.it/index.php?id_category=77&amp;controller=category" title="Tazza con Immagine Personalizzata del tuo Campione">Tazza</a>
	</li>

							</ul>
	</li>

												
<li class="category_83">
	<a href="http://www.apeprocidana.it/index.php?id_category=83&amp;controller=category" title="">ProcidaMania</a>
	</li>

												

							</ul>
	</li>

							</ul>

E vorrei che al click dell'utente su una voce madre si aprissero i figli... il classico menù ad albero/comparsa.

Il codice jQuery che uso è:

Codice:

<script>var MenuTree = {
    collapse: function(element) {

        element.slideToggle(600);

    },

    walk: function() {

        $('a', '.tree').each(function() {

            var $a = $(this);
            var $li = $a.parent();

            if ($a.next().is('ul')) {

                var $ul = $a.next();

                $a.click(function(e) {

                    e.preventDefault();
                    MenuTree.collapse($ul);

                    $a.toggleClass('active');

                });

            }



        });


    }
};

MenuTree.walk();</script>

Tuttavia non accade nulla. Qualcuno sa aiutarmi?

**NLSweb** · 24-11-2014, 10.44.37

Ti posso suggerire questo codice jQuery per gestire il menu ad albero ... DEMO

spero ti possa aiutare : )

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$("li").addClass("voce"); // ad ogni LI assegno la classe VOCE (di menu)

$("li").has("ul").removeClass("voce"); // se il LI ha un UL (quindi un sottomenu) rimuovo la classe VOCE
$("li").has("ul").addClass("sottomenu"); // e gli assegno la classe SOTTOMENU

$(".sottomenu ul").addClass("nascondi"); // a tutti i UL dei SOTTOMENU assegno la classe NASCONDI
$(".sottomenu ul").hide(); // e li nascondo

$(".sottomenu").click(function(evento){  // all'evento CLICK su SOTTOMENU definisco una funzione con evento
 var figlio = $(this).find("ul").slice(0,1); // creo la variabile FIGLIO che definisce il primo UL del SOTTOMENU
 
 var vero = figlio.is(function(){ // verifico la classe di FIGLIO (MOSTRA o NASCONDI)
  var classe = figlio.attr('class');
  if(classe==="mostra"){
   return true;
  }else{
   return false;
  }
 });

 if ( vero ) { // se la classe è MOSTRA (visibile), cambio la classe in NASCONDI (invisibile)
  figlio.removeClass("mostra");  
  figlio.addClass("nascondi");
  figlio.hide();
 }else{ // se la classe è NASCONDI (invisibile), cambio la classe in MOSTRA (visibile)
  figlio.removeClass("nascondi");  
  figlio.addClass("mostra");
  figlio.show();
 }
 
 evento.stopPropagation(); // fermo la propagazione dell'evento CLICK su SOTTOMENU ad altri elementi del MENU
 
});


});
</script>
<style>
/* definite l'aspetto grafico come volete */

.voce{
 color:blue;
}
.sottomenu{
 color:red;
}
.mostra{

}
.nascondi{

}
</style>
</head>
<body>

<!-- la struttura HTML è una semplice lista UL LI -->

<ul>
<li><p>VOCE1</p></li>
<li><p>VOCE2</p>


<ul>
<li><p>SVOCE1</p></li>
<li><p>SVOCE2</p></li>
<li><p>SVOCE3</p>


<ul>
<li><p>SSVOCE1</p></li>
<li><p>SSVOCE2</p></li>
<li><p>SSVOCE3</p></li>
<li><p>SSVOCE4</p></li>
</ul>

</li>
<li><p>SVOCE4</p></li>
</ul>

</li>
<li><p>VOCE3</p></li>
<li><p>VOCE4</p>


<ul>
<li><p>SVOCE1</p></li>
<li><p>SVOCE2</p></li>
<li><p>SVOCE3</p></li>
<li><p>SVOCE4</p>


<ul>
<li><p>SSVOCE1</p></li>
<li><p>SSVOCE2</p></li>
<li><p>SSVOCE3</p></li>
<li><p>SSVOCE4</p></li>
</ul>

</li>
</ul>

</li>
</ul>

</body>
</html>

**miki92** · 24-11-2014, 10.58.59

Tralasciando il codice HTML che non è del tutto corretto, il codice, a prima vista, sembra che assegni a tutti gli elementi li della pagina la classe voce e non solo ad un menù distinto da un ID.

**NLSweb** · 24-11-2014, 12.23.54

In questo esempio Sì è come dici tu...

ma basta inserire la lista in un div con id menu e nel codice jQuery specificarlo

DEMO

..scusa nel HTML quali sono gli errori ?

Discussione: Menù ad albero con jQuery

LinkBack

Strumenti discussione

Display

Menù ad albero con jQuery

Regole di scrittura