В многоуровневом бургер-меню конфликтует toggle самого элемента и других,как пофиксить?

Question

[alexiusgrey]

Недавно про это меню уже спрашивал, со скроллом помогли.
Заказчик попросил сделать, чтобы открытым был только один подпункт, а остальные автоматически закрывались при открытии.
В оригинале было так

jQuery('ul#burger-menu span.fa-open').on('click', function() {
  jQuery(this).toggleClass('rotate');
  jQuery(this).parent('li').children('ul.sub-menu').slideToggle();	
});

Я разбиваю sub и subsub меню на два выражения.
Проблема - если я сначала открываю один, а затем другой подпункт, то другие закрываются, но перестает работать тоггл на самом активном элементе. Я не могу его закрыть и опять открыть по клику на него же, он закрывается, только если я открою еще какой-то элемент.
А мне надо, чтобы тоггл работал и на самом активном элементе.

jQuery('ul#burger-menu>li>span.fa-open').on('click',function() {
 jQuery('ul#burger-menu>li>span.fa-open').removeClass('rotate');    
  jQuery(this).toggleClass('rotate');
  jQuery('ul.sub').removeClass('d-block');      
  jQuery(this).parent('li').children('ul.sub').toggleClass('d-block');
 /* jQuery('ul#burger-menu>li').removeClass('opened-burger-item');      
  jQuery(this).parent('li').addClass('opened-burger-item'); */      
}); 

    
jQuery('ul#burger-menu li>ul.sub>li>span.fa-open').on('click',function() {
jQuery('ul#burger-menu li>ul.sub>li>span.fa-open').removeClass('rotate');
  jQuery(this).toggleClass('rotate');
  jQuery('ul.subsub').removeClass('d-block');   
  jQuery(this).parent('li').children('ul.subsub').toggleClass('d-block');
   /* jQuery('ul#burger-menu>li').removeClass('opened-burger-item');    
  jQuery(this).parent('li').addClass('opened-burger-item'); */  
});

Я уже и класс родителю цеплял, как видно - закомментрированный, пробовал внутри него прицепить тоггл, не помогло.
Где я ошибаюсь? Снова в очевидных вещах? Несколько часов уже пробую разные способы.

P. S Кто вопроса про прокрутку не помнят, я там писал, что это не прям все мое меню, я шрифты и иконки не копировал, они не особо нужны, просто включите воображение, что при открытии там крестик, а не огромная копия бургера.
$ не работает, siblings, closest тоже, в этом я не непросвещенны - знаю про методы, но помогли только дети с родителями. Но если подскажете рабочий способ с этими выражениями - буду благодарен.

Comments

[nonconformiste]

Не особо в код вчитывался, но суть понял. Что бы избежать таких конфликтов пользуйтесь .closest() и .find() и у вас в большинстве своем правильно все в коде, так как вы обращаетесь к this, но нужно везде заменить обращение к классам, на обращения к дочерним и родительским объектам относительно к елементу на котором событие клика.