html - jQuery hasClass for nested menu items -
i'm trying understand jquery little more, , today i'm attempting play around menu structure. @ present, menu has 3 levels, , i'm attempting have 'sub sub menu items' hidden until visitor clicks on second level of menu items.
my jquery function add , remove 'nav-open' class works first , second level menu items, i'm stuck on how grow function further account third level menu items, fourth, etc.
$(document).ready(function(){ $('ul.nav li').click(function(){ if($(this).hasclass('nav-open')) { $(this).removeclass('nav-open'); } else { $('ul.nav li').removeclass('nav-open'); $(this).addclass('nav-open'); } }); });
i've tried hand @ .toggleclass allows me click on main menu items without closing others, right i'm thinking isn't best approach.
$(document).ready(function(){ $('ul.nav li').click(function(){ $(this).toggleclass('nav-open'); }); });
my working demo @ jsfiddle , can see every time submenu opened, third level well, i'm looking have these hidden until individual clicks on second level menu item.
any appreciated!
you can use toggle
find()
, first()
go deeper in menu using many sub levels example
$('ul li a').click(function(){ $(this).parent().find('ul').first().toggle(); });
Comments
Post a Comment