Какие внести изменения в этом скрипте, чтобы при нажатии на родительскую категорию, раскрывался список подкатегорий?

Question

[iminby]

Ребята, вот скрипт мобильного меню на опенкарте:

ЖМЯК

$(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();
	});    
    
});

Какие нужно внести изменения, чтобы меню раскрывалось не на плюсик, а при нажатии на категорию родительскую:

Comments

[iminby]

https://jsfiddle.net/o0gu2gnu/
залил скрипт мобильного меню и стили именно мобильного.

Answer 1

[Сергей Тутуков]

iminby что же ты наделал.
1.

$(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>');

- это тоже самое
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');
  });

-смотри пункт 2
5. Чем это

$('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;
        }
      });

- сделай универсально.
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;
        }

- у тебя проблемы с логикой
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;
    }

- уверен что можно заменить на $('#navbar-inner').toggleClass('active')
8.

varche = true
varche = false

- если это глобальные переменные, так их определяй за пределами функции, а не внутри ее. и указывай var, let, const...

Вывод:
этот костыль не реанимировать