jquery - How do I DRY up this script? -
i have been plugging away @ navigation code, , got 1st layers of menu work. yay! i've noticed code works on 1st layers. well, kinda. open menus supposed close when click on different menu. works top-level nav options, not sub-menu options. i'm tempted copy/paste code works levels, know 1 big rule in coding don't repeat (dry). have @ , see if there's way apply rules of 1st if/else statement submenus? (sub-menu, drop-menu, slide-menu).
also, if top-level nav starts wrap, when click on 1 of links on 2nd line, sub-menu display on top-level link, making impossible close. there way fix that?
here jsfiddle
jquery
$(document).ready(function(){ $(".nav-tabs span").click(function(){ var activetab = $(".nav-tabs > li span.open"); var submenu = $(this).siblings("ul"); var thisparent = $(this).closest("ul"); if (thisparent.hasclass("nav-tabs")){ if (!$(this).is(activetab)){ /* alert("this link not active yet"); */ activetab.siblings("ul").slideup(); submenu.find("span+ul").hide(); activetab.removeclass("open"); $(this).addclass("open"); submenu.slidedown(); } else { /* alert("this link active"); */ submenu.slideup(); submenu.find("span+ul").hide(); $(this).removeclass("open"); } } else { $(this).toggleclass("open"); submenu.slidetoggle("fast", function(){ if (!$(this).is(".open")){ submenu.find("span+ul").removeclass("open").hide(); } }); } }); }); html
<div id="navbar"> <ul class="nav-tabs"> <li><span>home</span></li> <li id="active"><span>dogs <div class="arrow-down"></div></span> <ul class="sub-menu"> <li><span>meet breeds<div class="arrow-down"></div></span> <ul class="drop-menu"> <li><span>sort - z ~ </span> <ul class="slide-menu"> <li>breeds - f</li> <li>breeds g - l</li> <li>breeds m - r</li> <li>breeds s - z</li> </ul> </li> <li><span>sort akc group ~</span> <ul class="slide-menu"> <li>sporting group</li> <li>working group</li> <li>herding group</li> <li>hound group</li> <li>terrier group</li> <li>non-sporting group</li> <li>toy group</li> </ul> </li> <li><span>sort size ~</span> <ul class="slide-menu"> <li>x-small (&le 10in)</li> <li>small (10in > < 15in)</li> <li>medium (15in &ge < 21in)</li> <li>large (21in &ge < 28in)</li> <li>x-large (28in +)</li> </ul> </li> <li><span>sort coat ~</span> <ul class="slide-menu"> <li>very short/hairless</li> <li>short coat</li> <li>medium coats</li> <li>long coats</li> <li>non-shedding coats</li> <li>curly coats</li> </ul> </li> <li><span>sort trait ~</span> <ul class="slide-menu"> <li>apartment suitable</li> <li>laid back</li> <li>athletic</li> <li>protective</li> <li>extroverted</li> <li>pet friendly</li> <li>cuddle-buddies</li> </ul> </li> </ul> </li> <li><span>supplies<div class="arrow-down"></div></span> <ul class="drop-menu"> <li><span>crates & kennels</li> <li><span>bowls & dishes</li> <li><span>collars & leashes</li> <li><span>toys & games</li> <li><span>grooming</li> <li><span>apparal & accessories</li> </ul> </li> <li><span>finding dog<div class="arrow-down"></div></span></li> </ul> </li> <li><span>cats<div class="arrow-down"></div></span> <ul class="sub-menu"> <li><span>cat links<div class="arrow-down"></div></span></li> <li><span>cat links<div class="arrow-down"></div></span></li> <li><span>cat links<div class="arrow-down"></div></span></li> <li><span>cat links<div class="arrow-down"></div></span></li> <li><span>cat links<div class="arrow-down"></div></span></li> <li><span>cat links<div class="arrow-down"></div></span></li> </ul> </li> <li><span>birds<div class="arrow-down"></div></span> <ul class="sub-menu"> <li><span>bird links<div class="arrow-down"></div></span></li> <li><span>bird links<div class="arrow-down"></div></span></li> <li><span>bird links<div class="arrow-down"></div></span></li> <li><span>bird links<div class="arrow-down"></div></span></li> <li><span>bird links<div class="arrow-down"></div></span></li> <li><span>bird links<div class="arrow-down"></div></span></li> </ul> </li> <li><span>small mammals<div class="arrow-down"></div></span> <ul class="sub-menu"> <li><span>sm.mammal links<div class="arrow-down"></div></span></li> <li><span>sm.mammal links<div class="arrow-down"></div></span></li> <li><span>sm.mammal links<div class="arrow-down"></div></span></li> <li><span>sm.mammal links<div class="arrow-down"></div></span></li> <li><span>sm.mammal links<div class="arrow-down"></div></span></li> <li><span>sm.mammal links<div class="arrow-down"></div></span></li> </ul> </li> <li><span>articles<div class="arrow-down"></div></span> <ul class="sub-menu"> <li><span>article links<div class="arrow-down"></div></span></li> <li><span>article links<div class="arrow-down"></div></span></li> <li><span>article links<div class="arrow-down"></div></span></li> <li><span>article links<div class="arrow-down"></div></span></li> <li><span>article links<div class="arrow-down"></div></span></li> <li><span>article links<div class="arrow-down"></div></span></li> </ul> </li> <li><span>videos<div class="arrow-down"></div></span> <ul class="sub-menu"> <li><span>video links<div class="arrow-down"></div></span></li> <li><span>video links<div class="arrow-down"></div></span></li> <li><span>video links<div class="arrow-down"></div></span></li> <li><span>video links<div class="arrow-down"></div></span></li> <li><span>video links<div class="arrow-down"></div></span></li> <li><span>video links<div class="arrow-down"></div></span></li> </ul> </li> <li><span>updates<div class="arrow-down"></div></span> <ul class="sub-menu"> <li><span>more links<div class="arrow-down"></div></span></li> <li><span>more links<div class="arrow-down"></div></span></li> <li><span>more links<div class="arrow-down"></div></span></li> <li><span>more links<div class="arrow-down"></div></span></li> <li><span>more links<div class="arrow-down"></div></span></li> <li><span>more links<div class="arrow-down"></div></span></li> </ul> </li> </ul> </div> css included on jsfiddle
ha! able figure out answer on own!
where have variables defined here:
var activetab = $(".nav-tabs > li span.open"); var submenu = $(this).siblings("ul"); var thisparent = $(this).closest("ul"); all had change activetab variable this:
var thisparent = $(this).closest("ul"); var activetab = thisparent.children().children("span.open"); var submenu = $(this).siblings("ul"); works perfectly! , code works menus , don't have repeat myself!
Comments
Post a Comment