problema con nodos, clases y javascript

[aniMAYtions]

Hola amig@s.
Tengo un menú tipo árbol, con sus ul's, li's, ul's dento de li's y li's dentro de ul's... bueno, ya me entendeis.
Primero inicializo el árbol.
Cuando pincho sobre una de las categorías hago que se abra el submenú correspondiente a ese menú y que se cierren los demás. La clase de ese menú en concreto cambia a categoría abierta y todas las otras a categoría cerrada(por si había anteriormente una abierta).
En este paso, cuando abro el submenú, a las subcategorías(li's dentro de ul) les doy una clase de subcategoría(cambio tamaño de letra e imágen de lista).
El problema está cuando lo que quiero es marcar un submenú seleccionado. No me permite con javascript cambiarle la clase a ese li en concreto!! Y si le doy un color(con style.color='nombrecolor') luego ya no hay quien le cambie el color.

Os pongo un poco de código a ver si os lo aclaro:

Código HTML:

<ul id="menuArbol">
                    
                         <li id='msaludos' onClick="javascript:abreArbol(this.id); '><span>Saludos</span>
                            <ul>
                              <li onClick='javascript:seleccionaSubli(this.id)'>Buenos D&iacute;as</li>
                              <li>Buenas Tardes</li>
                              <li>Buenas Noches</li>
                            </ul>
                          </li>
</ul>
 

Código Javascript:

function iniciaMenuArbol()
{
    var menu = document.getElementById('menuArbol');
    
    var subramas = menu.getElementsByTagName('ul');
    
    for(var i=0; i<subramas.length; i++)
    {
        var categoria = subramas[i].parentNode;
        categoria.className='cCerrada';
        
        var idcat = categoria.id;
        
        var subcat = subramas[i].getElementsByTagName('li');
        
        for(var j=0; j<subcat.length; j++)
        {
            subcat[j].id = 's'+idcat+j;
        }
    }
    
    
    escondeMenu();
};
 

Si necesitais más código, pedidlo.
Gracias por la ayuda!!

[zerokilled]

¡buenas!
el código está incompleto... le falta código como para ponerlo a funcionar y experimentar el problema que obtienes.
[broma] vamos, que mis dotes adivinatorios me los arrebató otro miembro por falta de práctica. [/broma]

[aniMAYtions]

Gracias Zerokilled.
Vamos a ver, pongo el resto del código.

Código Javascript:

//Para cuando pinchas sobre el menú principal
 
function abreArbol(idmenu)
{
    escondeMenu();//primero vuelvo a cerrarlo entero
 
    menuabierto = document.getElementById(idmenu);
    if(idmenu != "minicio")
        menuabierto.className='cAbierta';
    
    
    var submenu = menuabierto.getElementsByTagName('ul');
    
    for(var i=0; i<submenu.length; i++)
    {
        
        submenu[i].style.display = '';
        
/*con lo siguiente intento que, cuando se abra el menú, todos los li's tomen la clase inicial, por si antes hubiera pinchado uno de ellos. Digo intento porque no lo consigo*/
 
                var subli = submenu[i].getElementsByTagName('li');
        for(var j=0; j<subli.length; j++)
        {
            
            document.getElementById(subli[j].id).className='ssubmenu';
            
        }
        
        
        
    }
};
 
/*Y con esto siguiente intento cambiar la clase del submenú que pincho*/
 
function clickSubCat(subli)
{
    document.getElementById(subli).style.color='red';
/*Esto me funciona, se pone en rojo. Pero lo siguiente, que es lo que realmente quiero hacer, no me surte efecto*/
         document.getElementById(subli).className='subcatActiva';
 
}
 

Creo que este es todo el código básico que utilizo.

También me gustaría, si es posible, que al iniciar el menú todos los submenús obtuvieran el evento onclick por medio de la misma función iniciaMenuArbol. Probé algo de código pero no me terminó de convencer.

Un saludo y gracias!!

[zerokilled]

considero que te estás complicando mucho. deberías mirar el concepto de delegación de eventos. en lugar de asignar un evento para cada elemento, le asignas un sólo evento al elemento ancestro común. luego a través del objeto Event.target manejas cómo mostrar y ocultar la lista. a continuación un ejemplo que te puede servir de idea aunque para mis gusto está un poco mal implementado. lo que hace es simple, mantiene una variable de la última lista activa. luego esconde todos los elementos UL ancestro hasta el elemento ancestro común (el UL principal). luego hace lo mismo, pero mostrando la nueva lista. nótese que la estructuración html es importante ya que el script se maneja por los nodos. http://jsfiddle.net/kRHqH/1/

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Devel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
ul ul{ display: none; }
li { padding: .25em; }
li:hover{ background-color: rgba(255,0,0,.1); }
</style>
<script type="text/javascript">
self.onload = function(){
var active = null;
document.getElementById('menuArbol').onclick = function(event){
	var ul = event.target.firstChild.nextSibling;
	if(!(ul && /ul/i.test(ul.nodeName)) ) return;
	if(ul == active){ ul.style.display = ul.style.display? '': 'block'; return; }
	while(active && active != this){ if(/ul/i.test(active.nodeName)) active.style.display = ''; active = active.parentNode; }
	active = ul;
	while(ul != this){ if(/ul/i.test(ul.nodeName)) ul.style.display = 'block'; ul = ul.parentNode; }
	};
};
</script>
</head>
<body>
<ul id="menuArbol">
<li>lenguajes
	<ul>
	<li>programacion
		<ul>
		<li>javascript</li>
		<li>python</li>
		<li>perl</li>
		<li>java</li>
		</ul>
	</li>
	<li>marcado
		<ul>
		<li>html</li>
		<li>xml</li>
		<li>sgml</li>
		<li>obml</li>
		</ul>
	</li>
	</ul>
</li>
<li>aplicaciones</li>
<li>tecnologias
	<ul>
	<li>movil</li>
	<li>tv</li>
	<li>portatil</li>
	<li>desktop</li>
	</ul>
</li>
</ul></body></html>

[aniMAYtions]

Gracias zerokilled por tu consejo.
He probado el código y veo que funciona bien. Pero hay unas cuantas cosas que no consigo salvar.
Lo primero que te comento es que javascript no es mi lenguaje y esta es la primera aplicación que estoy haciendo únicamente con html, javascript y ajax para cargar el contenido.
Con eso lo que quiero decirte es que no entiendo bien el código, por lo tanto no puedo hacer las modificaciones de estilo que necesito en mi menú, como el cambio de imagen de lista cuando está cerrado a cuando está abierto.
También he notado que sólo se cambia el color del li cuando haces el hover, pero no cuando pulsas y eso es también lo que necesito.

He estado buscando información sobre la parte del código que no entiendo, como el pasar event como parámetro a la función(que creo que se refiere al mismo onclick) o la línea ul && /ul/i.test... Y hay cosas que no he encontrado.
Como último favor te pido, podrías explicarme un poco el código?

Gracias de nuevo por todo!!