Menu

Sous menu disparait jquery

- - Dernière réponse :  beatrice - 4 janv. 2019 à 19:55
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
Afficher la suite 

Votre réponse

1 réponse

0
Merci
bonjour, je savais que vous n'allez pas répondre car vous n'avez surement pas compris ;)

en espérant avec le lien ca peut vous aidé.

j'ai ce code
https://codepen.io/anon/pen/MZVjae

si vous cliquez sur salon perso(la il sera actif) ensuite clique pseudo (l'onglet home est bien actif) ensuite vous re cliquez sur les salons (là vous verrez salon perso(actif) mais moi je veux que ca revient sur le 1 er onglet (actif)

donc j'ai rajouter


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


voilà ceux que ca fait

https://codepen.io/anon/pen/NeYRpP

là si vous cliquez sur salon perso, ensuite vous cliquer sur le pseudo (vous verrez l'onglet homme en gris car il n'est pas actif (coment on peut lui dire d'afficher )

si vous cliquez sur les salons là vous verrez les salons officielle actif


donc coment je doit faire pour que tout les cadres saffiche

merci
Commenter la réponse de beatrice