Excluir un elemento padre y sus hijos de la acción hide()

Estoy creando este menú, pero tengo un problema al excluir a un padre y sus hijos. Espero solucionar esto sin clases extra.

Entonces, la forma en que se supone que funciona es hacer clic en un a.clicked y lo .hide() el li elements fuera de lo propio li pero dentro del alcance de la ul

no hay problema para encontrar al padre ul y poner una clase en el li lo que hago li.active. Lo difícil aquí se convierte en excluir todos los elementos dentro del li.active. Suena desordenado, así que trato de comentar lo mejor que puedo en el guión.

Gracias chicos por la entrada

EDITAR: hice un mal trabajo explicando pero como si hiciera clic level 1 - 1y level 1 - 2 se supone que debe ocultarse y ese es el patrón a medida que profundizamos en el menú con 2 - 1 ect

primero de aquí es el demo: http://jsfiddle.net/Abj9u/6/

$('.clicked').on('click', function(){
    var $this = $(this);

    //activate this li
    $this.parent('li:first').addClass('active');

    //hide the other level (1)(2)(3)(4)(ect..) li items
    //is there a way to exlude .active li and its children without adding a class like .sub to the sub li's?
    $this.parents('ul:first').find('li').not('.active').hide();

    //add class to this for style
    $this.addClass('selected');

    //show the sub ul
    $this.parent().children('ul:first').show();
});​

html

<ul id="nav">
    <li>
        <a href="#" class="clicked">Level 1 - 1</a>

        <ul class="hidden">
            <li><a href="#" class="clicked">Level 2.1 - 1</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.1 - 1</a></li></ul>                
            </li>
            <li><a href="#" class="clicked">Level 2.2 - 1</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.2 - 1</a></li></ul>                
            </li>
            <li><a href="#" class="clicked">Level 2.3 - 1</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.3 - 1</a></li></ul>                
            </li>
        </ul>                
    </li>

    <li>
        <a href="#" class="clicked">Level 1 - 2</a>

        <ul class="hidden">
            <li><a href="#" class="clicked">Level 2.1 - 2</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.1 - 2</a></li></ul>                
            </li>
            <li><a href="#" class="clicked">Level 2.2 - 2</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.2 - 2</a></li></ul>                
            </li>
            <li><a href="#" class="clicked">Level 2.3 - 2</a>
                <ul class="hidden"><li><a href="#" class="clicked">Level 3.3 - 2</a></li></ul>                
            </li>
        </ul>                
    </li>
</ul>​

preguntado el 22 de mayo de 12 a las 21:05

Si oculta el padre, los hijos también se ocultarán automáticamente, por lo que todo lo que necesita hacer es ocultar el elemento relevante. lis, ¿verdad? -

@Gareth: Eso es lo que estoy pensando. Algo como $this.parents('ul:first > li').not('.active').hide(); -

sí, eso es lo que estoy tratando de hacer. es básicamente ocultar todo lo demás li's en el mismo nivel por así decirlo -

@MarkM eso no funciona, lo otro li's todavía son visibles -

2 Respuestas

Tal vez esto:

$(this).closest('li').siblings().hide()

en cuanto a por qué esto funciona, se explica por sí mismo:

  • a partir de este elemento hijo...
  • encontrar el primer padre LI...
  • luego encuentra a todos los hermanos de LI...
  • esconderlos.

contestado el 22 de mayo de 12 a las 22:05

sí, eso realmente funciona, pensé que era una locura al principio :) si tienes un minuto, ¿podrías actualizar tu respuesta por qué esto funciona y cómo? Gracias - Dejan.S

si pero que hace siblings quiere decir en este contexto? uno sí y otro no li elemento en este ul (no li's anidados)? - Dejan.S

Un hermano sería cualquier elemento en el mismo nivel/nodo en el árbol DOM. Entonces, los hermanos de un LI serían los otros LI y nada más. - DA.

¿Qué hay de encontrar el siguiente ul en el árbol, escondiendo TODOS los lis, luego mostrando solo el actual li?

$this.parents('ul:first > li').hide();
$this.parent().show();

Editar: Aunque la otra respuesta es una mejor solución...

contestado el 22 de mayo de 12 a las 21:05

esto no funciona aunque, todavía oculta todos los demás li's en ese ámbito del padre. esto podría funcionar si mostrara al niño li's en ese programa para. - Dejan.S

He editado para encontrar hijos directos del padre. ul. Pero como dije, si la otra respuesta funciona, úsala, es más simple. - Gareth

@ Dejan.S :-) Trabajar sin una forma fácil de probar tendrá ese resultado a veces. - Gareth

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.