jQuery(function($) { var $body = $('body'), clickEvent = 'ontouchstart' in window ? 'touchstart' : 'click'; function toggleMobileMenu() { var mobileClass = 'mobile-menu-open', transitionEnd = 'transitionend webkitTransitionEnd otransitionend MSTransitionEnd'; // Click to show mobile menu. $('.menu-toggle').on(clickEvent, function(event) { event.preventDefault(); event.stopPropagation(); // Do not trigger click event on '.wrapper' below. if ($body.hasClass(mobileClass)) { return; } $body.addClass(mobileClass); }); // When mobile menu is open, click on page content will close it. $('.site') .on(clickEvent, function(event) { if (!$body.hasClass(mobileClass)) { return; } event.preventDefault(); $body.removeClass(mobileClass).addClass('animating'); }) .on(transitionEnd, function() { $body.removeClass('animating'); }); } /** * Add toggle dropdown icon for mobile menu. * @param $container */ function initMobileNavigation($container) { // Add dropdown toggle that displays child menu items. var $dropdownToggle = $(''); $container.find('.menu-item-has-children > a').after($dropdownToggle); // Toggle buttons and sub menu items with active children menu items. $container.find('.current-menu-ancestor > .sub-menu').show(); $container.find('.current-menu-ancestor > .dropdown-toggle').addClass('toggled-on'); $container.on(clickEvent, '.dropdown-toggle', function(e) { e.preventDefault(); $(this).toggleClass('toggled-on'); $(this).next('ul').toggle(); }); } toggleMobileMenu(); initMobileNavigation($('.mobile-menu')); });