(function() {
var mainLinks = document.querySelectorAll(‘.main-link’),
current;
for (var i = 0; i < mainLinks.length; i++) {
mainLinks.onclick = function(e) {
// always collapse current sub-nav if there is one
if (current)
current.style.height = ‘0px’;
// get sub-nav
var subNav = this.parentNode.querySelector(‘.sub-nav’);
if (subNav) {
// prevent default browser behavior
e = e || event;
(e.preventDefault) ? e.preventDefault() : e.returnValue = false;
if (current == subNav)
// same main-link clicked, unset current
current = null;
else {
// another main-link clicked, open that sub-nav
current = subNav;
current.style.height = ‘123px’;
}
} else {
// if there is no sub-nav, unset current
current = null;
}
}
}
})();
You should remove the hover states to see that JS working (but leave the transitions, the JS would be a lot more complex without it). You can see that with jQuery it would be a lot easier, but you don’t really need it (I think it’s IE8+ because of querySelectorAll)
