Вспомогательные функции, короткие – легко понять.
function qsa( s, n ) {
return [].slice.call( (n || document).querySelectorAll( s ), 0 );
}
function eachqsa( c, s, n ) {
qsa( s, n ).forEach( c );
}
function show( el ) {
if( !el ) return;
el.style.display = 'block';
}
function activate( li ) {
li.classList.add( 'active' );
}
function deactivate( li ) {
li.classList.remove( 'active' );
}
function proc( li, next ) {
eachqsa( deactivate, '.active', li.parentNode );
activate( li );
show( next );
}
Далее инициализация
function procbind( lis, nexts ) { // привязывающая функция
var next = qsa( nexts ).pop();
function onclick() {
proc( this, next );
}
function bind( li ) {
li.onclick = onclick;
}
eachqsa( bind, lis );
}
// привязка по группам
procbind( '.principaly li', '.dropdown_1' );
procbind( '.dropdown_1 li', '.dropdown_2' );
procbind( '.dropdown_2 li', '.dropdown_3' );
procbind( '.dropdown_3 li', '.dropdown_4' );
Разбиение на мелкие функции для лучшего понимания.
