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();   }); 

http://jsfiddle.net/sv27e/


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -