Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 7 ■ JavaScript and User Interaction: Navigation and Forms
All the event listener method changeSection() needs to do is get the event target, test whether the first nested
UL of the parent node has the show class applied to it, and remove that UL if that is the case. Furthermore, it needs to
change the open class of the parent node to parent and vice versa.
siteNavigation.js (continued)
changeSection : function(e){
var t = DOMhelp.getTarget(e);
var firstList = t.parentNode.getElementsByTagName('ul')[0];
if(DOMhelp.cssjs('check', firstList, sn.showClass)) {
DOMhelp.cssjs('remove', firstList, sn.showClass)
DOMhelp.cssjs('swap', t.parentNode, sn.openClass, sn.parentClass);
} else {
DOMhelp.cssjs('add', firstList,sn.showClass)
DOMhelp.cssjs('swap', t.parentNode, sn.openClass, sn.parentClass);
}
DOMhelp.cancelClick(e);
}
}
DOMhelp.addEvent(window, 'load', sn.init,false);
This script, applied to the right HTML and styled with an appropriate style sheet, will give you the expanding and
collapsing navigation. The relevant parts of the CSS are as follows:
siteNavigation.css (excerpt)
#nav.dyn li ul{
display:none;
}
#nav.dyn li ul.show{
display:block;
}
#nav.dyn li{
padding-left:15px;
}
#nav.dyn li.parent{
background:url(plus.gif) 0 5px no-repeat #fff;
}
#nav.dyn li.open{
background:url(minus.gif) 0 5px no-repeat #fff;
}
You can show and hide the nested UL elements by setting the values of their display properties to block and
none, respectively. This also takes the contained links out of the normal tabbing order: keyboard users won’t have
to tab through all the links in the nested lists if they want to reach the next element on the same hierarchical level
without expanding the section. If they press Enter first to expand the section, they will be able to navigate through the
submenu links with the Tab key.
All LI elements get a left padding to allow for an indicator image to show that the section has child links or that it
is open. The LI elements with the class open or parent get a background image to indicate their state.
All of this is pretty nice, but what if you want to provide a link to the parent pages of the nested sections? The
solution is to add a new linked image before each of the parent links that does the showing and hiding and leaving the
link as it is.
www.it-ebooks.info
215