Hay varias alternativas para implementar árboles con jQuery. Una de las más sencillas que encontré es: jQuery treeView

Para crear el árbol, se arma la estructura utilizando listas html y luego se invoca a $(“#id_ul”).treeview(); y listo!

Ejemplo:

$(document).ready(function() {

$(“#arbol”).treeview();

});

<ul id="arbol">
	<li><a href="?1">Item 1</a>
		<ul>
			<li><a href="?1.0">Item 1.0</a>

				<ul>
					<li><a href="?1.0.0">Item 1.0.0</a></li>
				</ul>
			</li>

		</ul>
	</li>
	<li><a href="?2">Item 2</a>
		<ul>
			<li><span>Item 2.0</span>
				<ul>
					<li><a href="?2.0.0">Item 2.0.0</a>

						<ul>
							<li><a href="?2.0.0.0">Item 2.0.0.0</a></li>
							<li><a href="?2.0.0.1">Item 2.0.0.1</a></li>
						</ul>
					</li>
				</ul>
			</li>

		</ul>

	</li>

 </ul>

Para más información: jQuery treeView

Guardado en : Javascript, Programación, jQuery por admin