Paulina_Pipi

ok, so I made bug in previous navigation.js edition. I was using only one submenu and it was fine. It couldn’t work with more than one.

Author might not like this solution as it uses jQuery, but I was not patient enough to write it in vanilla JS. So below is new, working code to replace adding event listener to selector.

So instead of:
container.querySelector('.menu-item-has-children > a').addEventListener('click', function(event) { ... });

There is:

// it was much easier to write in jQuery than vanilla JS
	jQuery('.menu-item-has-children > a', container).on('click', function(e) {
		e.preventDefault();
		e.stopPropagation();

		var $parentLi = jQuery(this).closest('li');
		$parentLi.siblings('li').find('ul:visible').hide();
		$parentLi.find('ul.sub-menu').stop().toggle();
	});

of course ??

/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 */
 function toggleElement(el) {
	if (el.style.display == 'none' || el.style.display == '') {
		el.style.display = 'block';
	} else {
		el.style.display = 'none';
	}
 }

( function() {
	var container, button, menu;

	container = document.getElementById( 'site-navigation' );
	if ( ! container ) {
		return;
	}

	button = container.getElementsByTagName( 'button' )[0];
	if ( 'undefined' === typeof button ) {
		return;
	}

	menu = container.getElementsByTagName( 'ul' )[0];

	// Hide menu toggle button if menu is empty and return early.
	if ( 'undefined' === typeof menu ) {
		button.style.display = 'none';
		return;
	}

	menu.setAttribute( 'aria-expanded', 'false' );

	if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
		menu.className += ' nav-menu';
	}

	// zakomentowane, bo najwyrazniej menu-toggle ma jeszcze inny handler bazujacy na atrybutach uzytych ponizej
	// button.onclick = function() {
		// if ( -1 !== container.className.indexOf( 'toggled' ) ) {
			// container.className = container.className.replace( ' toggled', '' );
			// button.setAttribute( 'aria-expanded', 'false' );
			// menu.setAttribute( 'aria-expanded', 'false' );
		// } else {
			// container.className += ' toggled';
			// button.setAttribute( 'aria-expanded', 'true' );
			// menu.setAttribute( 'aria-expanded', 'true' );
		// }
	// };
	container.querySelector('.menu-item-has-children > a').addEventListener('click', function(event) {
		event.preventDefault();
		var submenus = this.closest('.menu-item-has-children').querySelector('ul.sub-menu');
		if (submenus instanceof Array) {
			Array.prototype.forEach.call(submenus, function(el, i) {
				toggleElement(el);
			});
		} else {
			toggleElement(submenus);
		}
	});
} )();

To fix collapsable menu I made 2 changes. First disabled whole event for button with menu-toggle class. This was whole section from navigation.js starting from line 40 (or something):

button.onclick = function() {

Note: looks like clicks on menu-toggle class buttons are handled somewhere else in code and it just interferes.

second thing was to add event handling to submenu toggle link. Whole code is pure js (just to keep convention of navigation.js) and didn’t require any changes to any other files.

First added toggle function to start of navigation.js:

function toggleElement(el) {
	if (el.style.display == 'none' || el.style.display == '') {
		el.style.display = 'block';
	} else {
		el.style.display = 'none';
	}
 }

second added click event listener to first link inside any element with children (indicated by class ‘menu-item-has-children’):

container.querySelector('.menu-item-has-children > a').addEventListener('click', function(event) {
		event.preventDefault();
		var submenus = this.closest('.menu-item-has-children').querySelector('ul.sub-menu');
		if (submenus instanceof Array) {
			Array.prototype.forEach.call(submenus, function(el, i) {
				toggleElement(el);
			});
		} else {
			toggleElement(submenus);
		}
	});

It might not be the best way to fix it, but it works. Maybe autor could review this code and include those changes into project.