WordPress :: Divi Theme :: Mobile Menu Collapsible Submenus Tweak

epanel-integration-body.html

<style>
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
</style>

<script>
(function($) {
	 
	function setup_collapsible_submenus() {
		var $menu = $('#mobile_menu'),
			top_level_link = '.menu-item-has-children > a';
			
		$menu.find('a').each(function() {
			$(this).off('click');
			
			$(this).on('click', function(event) {
				if ( $(this).is(top_level_link) && ! $(this).parent().hasClass('visible') ) {
					event.preventDefault();
					event.stopPropagation();
					$(this).parent().toggleClass('visible');
				
				} else {
					$(this).parents('.mobile_nav').find('.mobile_menu_bar').trigger('click');
				}
			});
		});
		
		$('body').on('click', function(event) {
			var $mobile_menu_opened = $('.mobile_nav.opened');
			
			if ( $mobile_menu_opened.length && ! $(event.target).is('.mobile_nav, .mobile_nav *') ) {
				$('.mobile_nav .visible').removeClass('visible');
				$mobile_menu_opened.find('.mobile_menu_bar').trigger('click');
			}	
		});
	}
	 
	$(window).on('load', function() {
		setTimeout(setup_collapsible_submenus, 700);
	});

})(jQuery);
</script>