При нажатии на элемент, который имеет подменю на телефоне, действие переключения подменю действует только на стрелку рядом с текстом, а не на текст.

Question

При нажатии на элемент, который имеет подменю на телефоне, действие переключения подменю действует только на стрелку рядом с текстом, а не на текст. Я попытался добавить класс текста в функцию при нажатии, которая заставляет текст скользить вверх, как со значком стрелки, но не открывает подменю, как делает стрелка. Ниже приведен код javascript для этого. Любые идеи о том, как настроить код js?

function rep_menu(){
	$('.toggle-mobile-menu').on('click',function(event){
		event.preventDefault();
		$(this).parents('.main-nav').toggleClass('active');
		if($(window).width()<768){
			$('.main-nav li.menu-item-has-children').append('<span class="btn-toggle-mobile-menu"></span>');
			$('.main-nav li.menu-item-has-children>.btn-toggle-mobile-menu').on('click',function(event){
				$(this).toggleClass('active');
				$(this).prev().stop(true,false).slideToggle();
			});
		}
	});
}

Я также нашел эту часть кода в моем основном файле js.

function init_MobileMenu(){

    $('body')
    .on('click','#hamburger-icon',function(e){
      e.preventDefault();
      $(this).toggleClass('active');
      $('body').toggleClass('opened-nav-animate');
      setTimeout(function(){
        $('body').toggleClass('opened-nav');
      }, 100)

    });

    $('.open-submenu').on('click', function(e){
      e.stopPropagation();
      e.preventDefault();
      $( this ).closest('li').toggleClass('active-menu-item');
      $( this ).closest('li').children( '.sub-menu-dropdown, .engo-megamenu-wrapper' ).slideToggle();
    });

    $(window).resize(function(){
      var $navHeight = $(window).height() - $('.navbar-container').height();
      $('.main-nav-mobile').css({'max-height': $navHeight});
    });

  }

Я добавляю ссылку на мой сайт здесь: Ссылка на сайт