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 - 1
and 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>
li
s, right?$this.parents('ul:first > li').not('.active').hide();
li's
on the same level so to speakli's
are still visible