Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 625
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 625
    Points : 808
    Points
    808

    Par défaut Comment modifier un librairie pour développer un menu

    Bonjour à tous,

    Je fabrique un petit menu déroulant à partir d'un livraire existante qui semble etre bien simple.
    Cette librairie va juste ouvrir un panel, de droite.

    Dedans j'ai mis un menu qui ressemble à ceci
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
     
    	 <nav class="flypanels-treemenu" role="navigation" aria-label="Main navigation">
    			<ul class="outerClass"><li class="first level1">
    	<div>
    		<a href="http://www.dixlunes.ch/" class="link" title="Accueil" >accueil</a>
    	</div>
     
    </li>
    <li class="haschildren" role="treeitem" aria-expanded="false">
    	<div class="link">
    		<a href="maison-de-naissances/" title="Maison de naissances" class="link" >maison de naissances
    		</a>
    		<a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
    			<i class="fa icon" aria-hidden="true"></i>
    		</a>
    	</div>
    <ul role="group" aria-hidden="true" hidden>
    <li>
    	<div>
    		<a href="maison-de-naissances/quelques-photos.html" class="link" title="Quelques photos" >quelques photos</a>
    	</div>
     
    </li>
     
     
    <li>
    	<div>
    		<a href="maison-de-naissances/particularités.html" class="link" title="Particularités" >particularités</a>
    	</div>
     
    </li>
     
     
    <li>
    	<div>
    		<a href="maison-de-naissances/coûts.html" class="link" title="Coûts" >coûts</a>
    	</div>
     
    </li>
    <li>
    	<div>
    		<a href="maison-de-naissances/naissances.html" class="link" title="Naissances" >naissances</a>
    	</div>
    </li>
    </ul>
    </li>
    </ul>
    </nav>

    J'attire votre attention sur
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
    			<i class="fa icon" aria-hidden="true"></i>
    		</a>
    Quand on clique dessus, il developpe le UL qui suit, soit:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <ul role="group" aria-hidden="true" hidden>...</ul>
    Alors premiere question qui va surement être remplacé par la deuxième: Comment faire ce script qui va développer uniquement le ul avec le role group, qui suit, et pas les autres.

    Mais si je veiens à poster ce message, c'est parce que j'aimerais ajouter ces modifications à la librairie existante, qui est très courte.
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
     
    (function(){
        // Slide In Panel - by CodyHouse.co
    	var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
    	if( panelTriggers.length > 0 ) {
    		for(var i = 0; i < panelTriggers.length; i++) {
    			(function(i){
    				var panelClass = 'js-cd-panel-'+panelTriggers[i].getAttribute('data-panel'),
    					panel = document.getElementsByClassName(panelClass)[0];
    				// open panel when clicking on trigger btn
    				panelTriggers[i].addEventListener('click', function(event){
    					event.preventDefault();
    					addClass(panel, 'cd-panel--is-visible');
    				});
    				//close panel when clicking on 'x' or outside the panel
    				panel.addEventListener('click', function(event){
    					if( hasClass(event.target, 'js-cd-close') || hasClass(event.target, panelClass)) {
    						event.preventDefault();
    						removeClass(panel, 'cd-panel--is-visible');
    					}
    				});
    			})(i);
    		}
    	}
     
    	//class manipulations - needed if classList is not supported
    	//https://jaketrent.com/post/addremove-classes-raw-javascript/
    	function hasClass(el, className) {
    	  	if (el.classList) return el.classList.contains(className);
    	  	else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
    	}
    	function addClass(el, className) {
    	 	if (el.classList) el.classList.add(className);
    	 	else if (!hasClass(el, className)) el.className += " " + className;
    	}
    	function removeClass(el, className) {
    	  	if (el.classList) el.classList.remove(className);
    	  	else if (hasClass(el, className)) {
    	    	var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
    	    	el.className=el.className.replace(reg, ' ');
    	  	}
    	}
    })();

    Je ne comprends pas pourquoi, il fait un for, ici
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    for(var i = 0; i < panelTriggers.length; i++) {
    s'il n'y en a qu'un.
    Peut-etre, s'il y avait deux panneaux, un a gauche et un a droite?
    Mais dans ce cas, il actionnerait les deux panneau??

    Bref, je ne vois pas comment ajouter un bout de code, pour développer un ul avec le role 'group' en cliquant sur le lien avec la class 'expand' qui à pour parent un li avec la class 'haschildren'.

    Je me demandais si ajouter ceci, avec un truc du genre

    Code jquery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    panel.addEventListener('click', function(event){
    					if( hasClass(event.target, 'expand')) {
    						event.preventDefault();
    						/*
    Séelctionner ici le premier ul avec le role 'group', et le développer
    /*
    // On ajoute la class qui le garde ouvert
    addClass(panel, 'cd-menu--is-open');
    /*
    Ici une condition pour vérifier si la class 'cd-menu--is-open' existe, sioui on la supprime
    removeClass(panel, 'cd-menu--is-open');
    et le sous-menu se referme.
    */
     
    					}
    				});

    Merci pour vos lumières et de me mettre sur la bonne voie.

    Bonne jounrée
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 598
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 598
    Points : 27 629
    Points
    27 629

    Par défaut

    Bonjour,

    tu parles d'une "librairie", sans dire laquelle...

    1- Pourquoi utiliser un bout de code que tu ne maitrises pas, pour faire une action qui, finalement, n'est pas bien compliquée :
    • on clique sur un élément
    • ça ouvre l'élément suivant

    2- Tu utilises jQuery ou pas ?

    Si oui, je peux te proposer : https://codepen.io/jreaux62/pen/dPxKKQ
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 625
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 625
    Points : 808
    Points
    808

    Par défaut

    Salut Jreaux.

    Merci pour ton lien, c'est très intéressant. Je vais l'étudier ce soir.
    C'est cette librairie
    https://codyhouse.co/demo/slide-in-panel/index.html
    mais j'ai quasiment mis tout le code dans ce poste
    Et voilà, ce que j'ai fait jusqu'à présent
    http://www.dixlunes.ch/teste2.html (Ne cliquez pas sur les liens, vous serez rediriger ailleurs)
    mais c'est que du CSS, en ce qui concerne le menu, une fois, le panneau développer
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  4. #4
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 625
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 625
    Points : 808
    Points
    808

    Par défaut

    Bonjour JREAUX,
    J'aimerais si tu pouvais me donner un coup de main a adapter ce script, n'étant pas un expert.
    J'ai donc essayé ceci et ca marche avec le HTML fourni
    https://codepen.io/jreaux62/pen/dPxKKQ
    Le truc, c,'est que code HTML reseemble à ceci
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
     
    <ul>
        <li class="active">
          <!-- active : menu EN COURS -->
    	 <div>
    	 <a href="#">A - One for the Money</a>
     
     
    		<a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
    			<i class="fa icon" aria-hidden="true">w</i>
    		</a>
    </div>
          <ul>
            <li>
              <a href="#">A - 1</a>
            </li>
            <li>
    		<div>
              <a href="#">A - 2</a>
    		  <a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
    			<i class="fa icon" aria-hidden="true">w</i>
    		</a>
    </div>
              <ul>
                <li>
                  <a href="#">A - 2.1</a>
                </li>
                <li>
                  <a href="#">A - 2.2</a>
                </li>
                <li>
                  <a href="#">A - 2.3</a>
                </li>
                <li>
                  <a href="#">A - 2.4</a>
                </li>
                <li>
                  <a href="#">A - 2.5</a>
                </li>
                <li>
                  <a href="#">A - 2.6</a>
                </li>
              </ul>
            </li>
            <li>
    		<div>
              <a href="#">A - 3</a>
    		  <a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
    			<i class="fa icon" aria-hidden="true">w</i>
    		</a>
    </div>
              <ul>
                <li>
    			<div>
                  <a href="#">A - 3.1</a>
    			  <a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
    			<i class="fa icon" aria-hidden="true">w</i>
    		</a>
    </div>
                  <ul>
                    <li>
                      <a href="#">A - 3.11</a>
                    </li>
                    <li>
                      <a href="#">A - 3.12</a>
                    </li>
                    <li>
                      <a href="#">A - 3.13</a>
                    </li>
                    <li>
                      <a href="#">A - 3.14</a>
                    </li>
                    <li>
                      <a href="#">A - 3.15</a>
                    </li>
                  </ul>
                </li>
                <li>
    			<div>
                  <a href="#">A - 3.2</a>
    			  <a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
    			<i class="fa icon" aria-hidden="true">w</i>
    		</a>
    </div>
                  <ul>
                    <li>
                      <a href="#">A - 3.21</a>
                    </li>
                    <li>
                      <a href="#">A - 3.22</a>
                    </li>
                    <li>
                      <a href="#">A - 3.23</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">A - 3.3</a>
                </li>
                <li>
                  <a href="#">A - 3.4</a>
                </li>
                <li>
                  <a href="#">A - 3.5</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">A - 4</a>
            </li>
          </ul>
        </li>
    </ul>
    Je dois mettre ceci pour les dérouler menu à plusieurs niveaux
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <div>
                  <a href="#">A - 3.1</a>
    			  <a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
    			<i class="fa icon" aria-hidden="true">w</i>
    		</a>
    </div>
    Donc c'est le deuxième a.exand qui va dérouler menu. le a qui le précède doit ouvrir la page
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
    			<i class="fa icon" aria-hidden="true">w</i>
    		</a>
    Donc, pour que le a.exand soit inactif, j'ai modifié le code aisni
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
     // on désactive les liens des Menus AVEC Sous-Menus (obligatoire pour Tablettes TACTILES / Smartphones)
      $(navMainId + " > nav > ul > li.hasSub > div > a.expand").on("click", function(event) {
        event.preventDefault();
      });
    Maintennat pour que le menu enfant de développement, je pense qu'il y a un problème avec la cible de parent()
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     
     $(navMainId + " > nav > ul > li > div > a.expand").on("click", function(event) {
     
        event.stopPropagation(); /* important */
        $(this)
          .parent()
          .find("li:not(:hover)")
          .removeClass("open");
        $(this).toggleClass("open");
        $(this)
          .parent()
          .find("li:not(:hover) ul")
          .slideUp("fast");
        if ($(this).hasClass("hasSub")) {
          $(this)
            .children("ul")
            .slideToggle("fast");
        }
      });
    car li n'est plus parent du a qui va le dévelloper, puis il y a un div et a avant a.exand. J'ai essayé du bricolage en ajoutant des parent() pour remonter jusqu'au li

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     
     $(navMainId + " > nav > ul > li > div > a.expand").on("click", function(event) {
     
        event.stopPropagation(); /* important */
        $(this)
          .parent().parent().parent() /* Bricolage */
          .find("li:not(:hover)")
          .removeClass("open");
        $(this).toggleClass("open");
        $(this)
          .parent().parent().parent()
          .find("li:not(:hover) ul")
          .slideUp("fast");
        if ($(this).hasClass("hasSub")) {
          $(this)
            .children("ul")
            .slideToggle("fast");
        }
      });
    Il y a bien quelque chose qui se passe au niveau du a.span, mais le menu de se développe pas, ce qui ne me surprend pas trop.
    Comment puis-je alors facilement remonter au li, en évitant le a et le div qui se trouve entre le li et le a.expand??

    Vois-tu?


    Merci beaucoup
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  5. #5
    Membre éclairé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    590
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 590
    Points : 889
    Points
    889

    Par défaut

    Citation Envoyé par pierrot10
    Comment puis-je alors facilement remonter au li, en évitant le a et le div qui se trouve entre le li et le a.expand??
    closest()

  6. #6
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 625
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 625
    Points : 808
    Points
    808

    Par défaut

    Merci beaucoup. Ca marche

    J'ai encore deux questions et l'adapation selon mon DOM fonctionnera (j'espère )

    Comment je peux modifer ceci
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#monmenu > a.expand").on("click", function(event) {..}
    pour qu'il ne tienne pas en comptre des éléements entre #monmenu et tous les a.expand?
    En fait ceci fonctionne
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    $("a.expand").on("click", function(event) {..}
    Mais admettons, que j'ai plusieurs menu (nav), j'aimerais que l'action se limite que dans le nav#monmenu.

    Dernière question, je n'arrive pas à fermer tous les menus, quand je clique sur un menu. Si je clique sur le menu 3, le 1,2 et 4 doivent se fermer. Quand je clique sur le 4, le 1,2,3 doivent se fermer, etc.

    Ce que j'ai c'est ceci
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
      $(navMainId + " > a.expand").on("click", function(event) {
        event.stopPropagation(); /* important */
        $(this)
          .closest("div")
          .find("li:not(:hover)")
          .removeClass("open");
        $(this).closest("li").toggleClass("open");
     
        $(this)
          .closest("div")
          .find("li:not(:hover) ul")
          .slideUp("fast");
        if ($(this).closest("li").hasClass("hasSub")) {
          $(this)
            .closest("li")
            .children("ul")
            .slideToggle("fast");
        }
      });
    plus précisément ceci
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    $(this)
          .closest("div")
          .find("li:not(:hover)")
          .removeClass("open");
        $(this).closest("li").toggleClass("open");
    Quand je clique sur a.expand, il va chercher (.find("li:not(:hover)") ) tous les li qui n'ont pas la souris dessus. Mais dans ce code, il va chercher tous les li qui sont enfants à a.expand, c'est bien ca? Vu qu'il n'y a rien pas, il ne fait rien.

    Ce qui serait top, c'est que lorsque je clique su a.expand, il ferme les ul qui sont enfant de li du même niveau, qui ne sont pas hover.

    Par exemple ici, si je clique sur le a.expand du niveau A-2, il fermerait le ul du A-1 et le ul de A-3 (s'il y en avait un)

    Si dans mon example, il y avait des sous menu au niveau A-2.1, il fermerait uniqument le ul des A-2.2 et A2.3, par exemple.
    Voyez-vous?

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <ul>
            <li>
    <div>
              <a href="#">A - 1</a>
          <a href="#">A - 2</a>
    		  <a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
    			<i class="fa icon" aria-hidden="true">w</i>
    		</a>
    </div>
    <ul>
    <li>1</li>
    <li>2</li>
    </ul>
            </li>
            <li>
    		<div>
              <a href="#">A - 2</a>
    		  <a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand">
    			<i class="fa icon" aria-hidden="true">w</i>
    		</a>
    </div>
              <ul>
                <li>
                  <a href="#">A - 2.1</a>
                </li>
                <li>
                  <a href="#">A - 2.2</a>
                </li>
                <li>
                  <a href="#">A - 2.3</a>
                </li>
                <li>
                  <a href="#">A - 2.4</a>
                </li>
                <li>
                  <a href="#">A - 2.5</a>
                </li>
                <li>
                  <a href="#">A - 2.6</a>
                </li>
              </ul>
            </li>
    </ul>

    (Mais la première question est plus importante pour moi)

    Merci beaucoup!!
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  7. #7
    Expert éminent

    Homme Profil pro
    Développeur .NET
    Inscrit en
    janvier 2012
    Messages
    4 366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Finance

    Informations forums :
    Inscription : janvier 2012
    Messages : 4 366
    Points : 9 015
    Points
    9 015
    Billets dans le blog
    25

    Par défaut

    Library = bibliothèque

    Bookstore = librairie
    À ma connaissance, le seul personnage qui a été diagnostiqué comme étant allergique au mot effort. c'est Gaston Lagaffe.

    Ô Saint Excel, Grand Dieu de l'Inutile.

    Excel n'a jamais été, n'est pas et ne sera jamais un SGBD, c'est pour cela que Excel s'appelle Excel et ne s'appelle pas Access junior.

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 598
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 598
    Points : 27 629
    Points
    27 629

    Par défaut

    Bonjour,

    Pour bien comprendre, il faut comparer les 2 architectures et le bout de code JS associé.

    1- Dans MON code, on avait (voir le code "(ancienne version)" ** ) :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <nav id="navMain">
      <ul>
        <li class="active">
          <a href="#">A - One for the Money</a>
          <ul>
            <li>...</li>
    et :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      $(navMainId + " ul > li").on("click", function(event) {
    Le "click" est déclenché sur le <li>.

    2- Dans TON code, on a :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <nav id="navMain">
      <ul>
        <li class="active">
          <div>
            <a href="#">A - One for the Money</a>
            <a ... class="expand"><i class="fa icon" aria-hidden="true">w</i></a>
          </div>
              <ul>
            <li>...</li>
    et :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      $(navMainId + " ul > li a.expand").on("click", function(event) {
    Le "click" est déclenché sur le <a class="expand">.

    Donc, pour passer du <a> au <li>, il faut déjà remonter de 1 niveau ( .parent() ).
    Pour atteindre le <ul>, on remonte de 2 niveaux ( .parent().parent() ).

    Dans MON code, je n'ai pas de <div>. Donc, inutile de chercher .closest("div") !
    Il faut remonter jusqu'au <ul>, pour cherche ensuite les "frères"* du <li> en cours (les autres <li> de même niveau)

    3- On obtient : https://codepen.io/jreaux62/pen/yQOmpV

    (j'en ai profité pour ajouter des explications)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     $(navMainId + " ul > li a.expand").on("click", function(event) {
        event.stopPropagation(); // important (on stoppe la propagation de l évènement)
        // 1- on supprime la class "open" sur les autres <li>
        $(this)
          .parent().parent().parent() // remonte sur le <ul>
          .find("li:not(:hover)") // le <li>
          .removeClass("open");
        // 2- on ajoute la class "open" sur le <li> cliqué
        $(this).parent().parent().toggleClass("open");
        // 3- on referme tous les sous-menus
        $(this)
          .parent().parent().parent() // le <ul>
          .find("li:not(:hover) ul") // le <li>
          .slideUp("fast");
        // 4- on ouvre le sous-menus du <li> cliqué
        if ($(this).parent().parent().hasClass("hasSub")) { // le <li>
          $(this)
            .parent().parent() // le <li>
            .children("ul")
            .slideToggle("fast");
        }
      });
    4- VARIANTE : Puisque j'ai parlé de "frères", on peut voir si on ne peut pas tirer profit de siblings().
    Du coup, on ne remonte pas jusqu'au <ul>, mais juste jusqu'au <li>, afin de cibler ensuite ses "frères".
    On va en profiter pour simplifier le code, en ajoutant une variable the_li.

    On obtient alors :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
      $(navMainId + " ul > li a.expand").on("click", function(event) {
        event.stopPropagation(); // important (on stoppe la propagation de l évènement)
    //    var the_li = $(this).parent().parent(); // remonte sur le <li> parent
        var the_li = $(this).closest("li"); // remonte sur le <li> parent (fonctionnera avec ou sans <div> intermédiaire)
        // 1- on supprime la class "open" sur les autres <li>
        the_li.siblings().not(the_li) // les <li> frères
          .removeClass("open");
        // 2- on ajoute la class "open" sur le <li> cliqué
        the_li.toggleClass("open");
        // 3- on referme tous les autres sous-menus
        the_li.siblings().not(the_li).find("ul") // le <li>
          .slideUp("fast");
        // 4- on ouvre le sous-menus du <li> cliqué
        if (the_li.hasClass("hasSub")) { // le <li>
          the_li // le <li>
            .children("ul")
            .slideToggle("fast");
        }
      });
    ** N.B. Du coup... j'en aussi en profiter pour optimiser MON code ! (voir le code "NOUVELLE version")

    Remarque :
    • var the_li = $(this).parent().parent(); : indique qu'on remonte de 2 niveaux (suppose qu'on a forcément une balise entre le <a> et le <li> ciblé)
    • var the_li = $(this).closest("li"); : fonctionnera avec ou sans <div> intermédiaire


    5- Pour les sous-sous-niveaux :
    • je ne sais pas si tu en as,
    • ni si la structure est la même (avec un <div> ou pas, <a> avec la class "expand",...)

    A toi de nous le dire...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #9
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 625
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 625
    Points : 808
    Points
    808

    Par défaut

    Bonjour JREAUX,
    J'avais pas vu ton post et j'ai viens de réussir à faire ceci
    http://www.dixlunes.ch/teste2.html (ne cliquez pas sur les menus, vous serez redirigé sur le site qui "attend" ce menu )
    grâce à ton exemple. Merci.

    J'ai vite lu ton message et je l'ai compris. J'ai principalement utilisé closest() et j'ai remplacé la class hasSub par haschildren. Mais je vais prendre plus te temps à lire tes explications et de faire les modifications en conséquence. Merci beaucoup

    Il y a encore un truc que j'aimerais mais c'est pas urgent. Ca me va aussi comme c'est actuellement.
    Mais si plus tard je pouvais réduire les menus du même niveau quand je clique sur un, ca serait top.

    Par exemple
    http://www.dixlunes.ch/teste2.html
    Si je clique sur "maison de naissance", puis après "nos service", "maison de naissance" se ferme.

    Si je dévelope "FAQ", puis "questions générales", puis après "conditions requises", "questions générales" se ferme mais pas "FAQ". Si en suite je clique sur "Sécurité", "questions requise" se ferme. Et ainsi de suite. Idem pour les autres menus s'ils avaient des sous-menus et/ou sous-sous-menus, et sous-sous-sous-menu....

    Voyez-vous?

    Milles mercis
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  10. #10
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 598
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 598
    Points : 27 629
    Points
    27 629

    Par défaut

    Citation Envoyé par pierrot10 Voir le message
    ...J'avais pas vu ton post...
    Tu n'en as surtout PAS tenu compte !


    Si tu as avais suivi (et compris !) mes explications et consignes, tu devrais obtenir le résultat voulu.

    Pour moi, c'est le cas : : https://codepen.io/jreaux62/pen/yQOmpV
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  11. #11
    Débutant  
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 625
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 625
    Points : 808
    Points
    808

    Par défaut

    Merci jreaux,
    Ca marche très bien.
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 6
    Dernier message: 15/02/2011, 17h46
  2. comment modifier le script pour zoommer avec un style.cursor?
    Par sebac dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 28/04/2010, 17h08
  3. Comment modifier la BDR pour un autre utilisateur, mais sans regedit ?
    Par Nicolas Coolman dans le forum API, COM et SDKs
    Réponses: 2
    Dernier message: 23/11/2009, 17h24
  4. Réponses: 3
    Dernier message: 16/07/2007, 20h41
  5. Comment modifie une requete pour avoir des sommes?
    Par F@ce27 dans le forum Langage SQL
    Réponses: 8
    Dernier message: 16/06/2006, 14h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo