Sous menu disparait jquery

bonjour,

je vous mets le code html qui n'a pas important mais c'est juste pour comprendre mieu le code jquery ;)

	  <!--début des navigations par onglet-->
	  <section id="global-mini-chat">

	  <!--début des menus principaux-->
	  <nav><ul class="menu">
	  <li class="actif">Les salons</li>
	  <li>#1salon</li>
	  <li>pseudo</li>
	  </ul></nav>
	  <!--fin des menus principaux-->

	  <!--début du contenu-->
	  <div class="contenu6">

	  <!--début du les salons-->
	  <div class="item level1">
	  <!--début des sous menus les salons-->
	  <nav><ul class="sous-menu not-border">
	  <li class="actif">Salons Officiels</li>
	  <li>Salons Perso</li>
	  </ul></nav>
	  <!--fin des sous menus les salons-->


	  <nav><li class="creer-salon"><button class="icon-button-ajouter" type="submit">créer un salon</button></li></nav>





	  <!--début du contenu-->
	  <div class="contenu5">

	  <!--début salons officiels-->
	  <div class="item level2">conversation</div>
	  <!--fin salons officiels-->
	  <!--début salons Perso-->
	  <div class="item level2">conversation</div>
	  <!--fin salons perso-->

	  </div>
	  <!--fin du contenu-->

	  </div>
	  <!--fin du Les salons-->

	  <!--début #1salon-->
	  <div class="item level1">
		  
		  
		  
		  
			  <!--début des sous nouvelle proposition-->
	  <nav><ul class="sous-menu">
	  <li class="actif">homme(s)</li>
	  <li>femme(s)</li>
	  </ul></nav>
	  <!--fin des sous nouvelle proposition-->
	  <!--début du contenu-->
	  <div class="contenu">
	  <!--début Tout les nouvelle proposition hommes-->
	  <div class="item level2">blablablz</div>
	  <!--fin Tout les nouvelle proposition hommes-->

	  <!--début tout les nouvelle proposition femmes-->
	  <div class="item level2">blablablz</div>
	  <!--fin tout les nouvelle proposition femmes-->
	  </div>
	  <!--fin du contenu-->
  
		  
		  
		  
		  
		  
		  
		  
		  
		  </div>
	  <!--fin #1salon-->
	  <!--début pseudo-->
 <div class="item level1">
		  
		  
		  
		  
			  <!--début des sous nouvelle proposition-->
	  <nav><ul class="sous-menu">
	  <li class="actif">homme(s)</li>
	  <li>femme(s)</li>
	  </ul></nav>
	  <!--fin des sous nouvelle proposition-->
	  <!--début du contenu-->
	  <div class="contenu">
	  <!--début Tout les nouvelle proposition hommes-->
	  <div class="item level2">blablablz</div>
	  <!--fin Tout les nouvelle proposition hommes-->

	  <!--début tout les nouvelle proposition femmes-->
	  <div class="item level2">blablablz</div>
	  <!--fin tout les nouvelle proposition femmes-->
	  </div>
	  <!--fin du contenu-->
  
		  
		  
		  
		  
		  
		  
		  
		  
		  </div>	  <!--fin pseudo-->

	  </div>
	  <!--fin du contenu-->

	  </section>
	  <!--fin des navigations par onglet-->

j'ai des menu et sous menu sous forme onglet

      var nav = function (parent, level){
            $(parent).css('display', 'flex');
            $(parent).click(function(event) {
                var actuel = event.target;
                if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
                    return;
                }
                $(actuel).addClass('actif').siblings().removeClass('actif');
                setDisplay();
            });
            function setDisplay() {
                var modeAffichage;
                $(parent).find('li').each(function(rang) {
                    modeAffichage = $(this).hasClass('actif') ? '' : 'none';
                    $('.item.level'+level).eq(rang).css('display', modeAffichage);
                });
            }
            setDisplay();       
       };
       nav('.menu', 1);
       nav('.sous-menu', 2);

là si je vois les salons(menu) et salons officielle(sous menu) là il sont bien actif. jusqu'a la c'est bon.

ensuite
je clique sur le salon perso (sous menu).

ensuite je cliques sur l'onglet pseudo (le 3 eme menu)

là on voit bien l'onglet pseudo(menu) qui st actif avec l'onglet home (sous-menu)

jusqu'a là c'est bon

ensuite je re clique sur l'onglets les salons (menu)

là je m'apperçois que l'onglet actif c'est le salon perso car il tient en compte le dernier onglet du sous menu qu'on a cliqué

hor moi j'aimerais que c'est le 1 er onglets qui soit actif

pour celà :

j'ai rajouté

function setDisplay() {
    var modeAffichage;
    $(parent).find('li').each(function(rang) {
        if(!$(this).hasClass('actif') ){
     
        $('.item.level'+level).find('li').removeClass('actif');
    $('.item.level'+level).find('li').eq(0).addClass('actif');
     }

en final le nouveau code

      var nav = function (parent, level){
            $(parent).css('display', 'flex');
            $(parent).click(function(event) {
                var actuel = event.target;
                if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
                    return;
                }
                $(actuel).addClass('actif').siblings().removeClass('actif');
                setDisplay();
            });
function setDisplay() {
    var modeAffichage;
    $(parent).find('li').each(function(rang) {
        if(!$(this).hasClass('actif') ){
     
        $('.item.level'+level).find('li').removeClass('actif');
    $('.item.level'+level).find('li').eq(0).addClass('actif');
     }                    modeAffichage = $(this).hasClass('actif') ? '' : 'none';
                    $('.item.level'+level).eq(rang).css('display', modeAffichage);
                });
            }
            setDisplay();       
       };
       nav('.menu', 1);
       nav('.sous-menu', 2);

là, il prend bien compte le 1 er onglet qui est actif là tout est bon

mais le souci , je n'arrive pas à trouvé

quand je clique sur le saon ou pseudo, du menu .

je m’aperçois que les sous menu homme et femme disparaît ,
come , je doit dire sous menu afin qu'il apparaît à nouveau

merci