What changes to make in this script so that when you click on the parent category, a list of subcategories is opened?

Question

JavaScript

Guys, here is the mobile menu script on opencart:

ZHMYAK

$(document).ready(function () {
  
  

  $("ul.mobilemenu li span.button-view1,ul.mobilemenu li span.button-view2").each(function(){
        $(this).append('<span class="ttclose"><a href="javascript:void(0)"></a></span>');
      });
    
  $('#wrap-ma-mobilemenu').css('display','none');
  
  $("ul.mobilemenu li.active").each(function(){
    $(this).children().next("ul").css('display', 'block');
  });
         $("ul.mobilemenu li ul").hide();
     
    $(document).ready(function(){
      $('span.button-view1 span').click(function() { 
      if ($(this).hasClass('ttopen')) {varche = true} else {varche = false};
      if(varche == false){
        $(this).addClass("ttopen");
        $(this).removeClass("ttclose");
        $(this).parent().parent().find('ul.level2').slideDown();
        varche = true;
      } else 
      {	
        $(this).removeClass("ttopen");
        $(this).addClass("ttclose");
        $(this).parent().parent().find('ul.level2').slideUp();
        varche = false;
      }
      });
      
      $('span.button-view2 span').click(function() { 
        if ($(this).hasClass('ttopen')) {varche = true} else {varche = false};
        if(varche == false){
          $(this).addClass("ttopen");
          $(this).removeClass("ttclose");
          $(this).parent().parent().find('ul.level3').slideDown();
          varche = true;
        } else 
        {	
          $(this).removeClass("ttopen");
          $(this).addClass("ttclose");
          $(this).parent().parent().find('ul.level3').slideUp();
          varche = false;
        }
      });
    });
    
  //mobile
  $('.btn-navbar').click(function() {
    
    var chk = 0;
    if ( $('#navbar-inner').hasClass('navbar-inactive') && ( chk==0 ) ) {
      $('#navbar-inner').removeClass('navbar-inactive');
      $('#navbar-inner').addClass('navbar-active');
      $('#wrap-ma-mobilemenu').css('display','block');
      chk = 1;
    }
    if ($('#navbar-inner').hasClass('navbar-active') && ( chk==0 ) ) {
      $('#navbar-inner').removeClass('navbar-active');
      $('#navbar-inner').addClass('navbar-inactive');			
      $('#wrap-ma-mobilemenu').css('display','none');
      chk = 1;
    }
    //$('#ma-mobilemenu').slideToggle();
  });    
    
});

What changes need to be made so that the menu does not open with a plus sign, but when you click on the parent category:

Answer 1

iminby what have you done.
one.

$(document).ready(function () { в $(document).ready(function () {

2.

$("ul.mobilemenu li span.button-view1,ul.mobilemenu li span.button-view2").each(function(){
        $(this).append('<span class="ttclose"><a href="javascript:void(0)"></a></span>');
      });
=>
  $("ul.mobilemenu li span.button-view1,ul.mobilemenu li span.button-view2").append('<span class="ttclose"><a href="javascript:void(0)"></a></span>');

is the same
3.

$('#wrap-ma-mobilemenu').css('display','none'); 
$("ul.mobilemenu li ul").hide();
- это надо делать через css

4.

$("ul.mobilemenu li.active").each(function(){
    $(this).children().next("ul").css('display', 'block');
  });

- see point 2
5. What is it

$('span.button-view1 span').click(function() { 
      if ($(this).hasClass('ttopen')) {varche = true} else {varche = false};
      if(varche == false){
        $(this).addClass("ttopen");
        $(this).removeClass("ttclose");
        $(this).parent().parent().find('ul.level2').slideDown();
        varche = true;
      } else 
      {	
        $(this).removeClass("ttopen");
        $(this).addClass("ttclose");
        $(this).parent().parent().find('ul.level2').slideUp();
        varche = false;
      }
      });

different from this

$('span.button-view2 span').click(function() { 
        if ($(this).hasClass('ttopen')) {varche = true} else {varche = false};
        if(varche == false){
          $(this).addClass("ttopen");
          $(this).removeClass("ttclose");
          $(this).parent().parent().find('ul.level3').slideDown();
          varche = true;
        } else 
        {	
          $(this).removeClass("ttopen");
          $(this).addClass("ttclose");
          $(this).parent().parent().find('ul.level3').slideUp();
          varche = false;
        }
      });

- make it universal.
6.

if ($(this).hasClass('ttopen')) {varche = true} else {varche = false};
        if(varche == false){
          $(this).addClass("ttopen");
          $(this).removeClass("ttclose");
          $(this).parent().parent().find('ul.level3').slideDown();
          varche = true;
        } else 
        {	
          $(this).removeClass("ttopen");
          $(this).addClass("ttclose");
          $(this).parent().parent().find('ul.level3').slideUp();
          varche = false;
        }

- you have problems with logic
7.

var chk = 0;
    if ( $('#navbar-inner').hasClass('navbar-inactive') && ( chk==0 ) ) {
      $('#navbar-inner').removeClass('navbar-inactive');
      $('#navbar-inner').addClass('navbar-active');
      $('#wrap-ma-mobilemenu').css('display','block');
      chk = 1;
    }
    if ($('#navbar-inner').hasClass('navbar-active') && ( chk==0 ) ) {
      $('#navbar-inner').removeClass('navbar-active');
      $('#navbar-inner').addClass('navbar-inactive');			
      $('#wrap-ma-mobilemenu').css('display','none');
      chk = 1;
    }

- I'm sure that can be replaced by $('#navbar-inner').toggleClass('active')
8.

varche = true
varche = false

- if these are global variables, then define them outside the function, not inside it. and specify var, let, const...
Conclusion:
this crutch cannot be reanimated