Mobile menu: How to use the whole menu item to make the submenu expand

[mdmnet]

Hello there,

is there a way to change the mobile menu to expand when clicking the whole title of it and not just the arrow icon?
I assume I only have to change this code, but after several tries nothing really worked out.

	/* ------------------------------------------------------------------------ */
	/* Mobile Navigation
	/* ------------------------------------------------------------------------ */
	$('#mobile-navigation-btn').click(function(){
		$('#mobile-navigation').stop(true,true).slideToggle(300, 'easeOutBack'); //easeInOutSine works also nice at 200ms
		return false;
	});
	
	$('#mobile-navigation .container ul li').each(function(){
		if($(this).find('> ul').length > 0) {
			 $(this).addClass('has-ul');
			 $(this).find('> a').append('<i class="fa fa-chevron-down"></i>');
		}
	});
	
	$('#mobile-navigation .container ul li:has(">ul") > a i').click(function(){
		$(this).parent().parent().toggleClass('open');
		$(this).parent().parent().find('> ul').stop(true,true).slideToggle(300, 'easeOutBack');
		return false;
	});

I tried to just use

 $('#mobile-navigation .container ul li:has(">ul") > a').click(function() 

without the “i” and remove the arrow icon, but that didnt quite work. What could I change there to make it work?

Kind regards!

Ticket