Question

Im building this menu but I’m having a problem with excluding a parent and its children. I hope to solve this without extra classes.

So the way it suppose to work is to click a a.clicked and it .hide() the li elements outside its own li but with in the scope of the ul

its no problem finding the parent ul and put a class on the li which i do li.active. The hard thing here becomes to exclude all the elements inside the li.active.
It do sound messy so i try to comment as best i can in the script.

Thanks guys for input

EDIT: i done a poor job explaining but like i click level 1 - 1and level 1 - 2 is suppose to hide and thats the pattern as we go deeper down the menu with 2 – 1 ect

first of here is the 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>​

Answer 1

Maybe this:

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

as for why this works, it’s fairly self explanatory:

• starting from this child element…
• find the first parent LI…
• then find all of this LI’s siblings…
• hide them.