javascript - Slicknav autoclosing multilevel menus -
i'm working slicknav mobile menu. came across cool little way have parent menu close automatically if click on parent menu , have working if i'm using below (please note, not know javascript. see me hacking other code i've found online):
<ul id="menu"> <li class="first"><a href="#">parent1</a> <ul> <li><a href="#" title="">child1</a></li> <li><a href="#" title="">child2</a></li> </ul> </li> <li><a href="#" title="">parent2</a> <ul> <li><a href="#" title="">child3</a></li> <li><a href="#" title="">child4</a></li> </ul> </li> <li><a href="#" title="">parent3</a> <ul> <li><a href="#" title="">child5</a></li> <li><a href="#" title="">child6</a></li> </ul> </li> </ul> javascript:
<script> $(function(){ $('#menu').slicknav({ label: 'menu', duration: 150, allowparentlinks: true, 'open': function(trigger){ var = trigger.parent().children('ul'); $('.slicknav_menu ul li.slicknav_open ul').each(function(){ if($(this).get( 0 ) != that.get( 0 )){ $(this).slideup().addclass('slicknav_hidden'); $(this).parent().removeclass('slicknav_open').addclass('slicknav_collapsed'); } }) }, closeonclick:true }); }); $("#content").click(function(){ $('#menu').slicknav('close'); }); </script> i'm needing make of children items have own dropdowns. there way make javascript function same idea? if unchanged, when tap/click on of children items own ul li items, opens, closes.
if remove this:
var = trigger.parent().children('ul'); $('.slicknav_menu ul li.slicknav_open ul').each(function(){ if($(this).get( 0 ) != that.get( 0 )){ $(this).slideup().addclass('slicknav_hidden'); $(this).parent().removeclass('slicknav_open').addclass('slicknav_collapsed'); } }) then autoclosing stops. parent , children/parents remain open.
i'd able tap children/parent , have remain open unless you're tapping on children/parent item. i'm sorry if i'm not making sense. tired , best can do....
as stated @ beginning of post, javascript not language... ideas or pointers appreciated.
Comments
Post a Comment