IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

jQuery Discussion :

Fermer les éléments d'un menu au click


Sujet :

jQuery

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

    Informations forums :
    Inscription : mai 2005
    Messages : 3 080
    Points : 926
    Points
    926
    Par défaut Fermer les éléments d'un menu au click
    Bonjour à tous,

    J'essaye de contruire mon propre menu à plusieurs niveau.
    Il agit en fonction de la class dropdown-toggle

    Code jquery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ( function( $ ) {
    	$( '.dropdown-toggle' ).click( function( e ) {
    		var _this = $( this );
    		e.preventDefault();
    		_this.toggleClass( 'toggle-on' );
    		_this.find('.fa').toggleClass( 'fa-angle-down fa-angle-up');
    		_this.parent().next( '.sub-menu' ).toggleClass( 'toggled-on' );
    		_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
     
    	} );
     
    })( jQuery );
    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
    114
     
        <section class="container e-panel-row">
     
            <nav role="navigation" aria-label="Main navigation">
     
                <ul class="e-justify-content-space-beween bg-black">
     
                    <li class="hasChildren">
                        <div>
                            <a href="#">A propo</a>
                            <a href="#" class="dropdown-toggle" aria-expanded="false">
                                [12]
                                <i class="fa fa-angle-down"></i>
                            </a>
                        </div>
     
                        <ul class="sub-menu" role="group">
                            <li>
                                <div>
                                    <a class="link" href="#">Item 1.1</a>
                                </div>
                            </li>
                            <li class="hasChildren">
     
                                <div>
                                    <a href="#" class="link">Item 1.2</a>
                                    <a href="#" class="dropdown-toggle" aria-expanded="false">
                                        [1]
                                        <i class="fa fa-angle-down"></i>
                                    </a>
                                </div>
     
                                <ul class="sub-menu" role="group">
                                    <li>
                                        <div>
                                            <a href="#">Item 1.2.1</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <a href="#">Item 1.2.2</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <a href="#">Item 1.2.3</a>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <div>
                                <a href="#">Item 333333</a>
                                </div>
                            </li>
                        </ul>
                    </li>    
     
                    <li>
                        <div>
                            <a href="#">Team</a>
                        </div>
                    </li>
                    <li class="hasChildren">
                        <div>
                            <a href="#" class="link">Contact</a>
                            <a href="#" class="dropdown-toggle" aria-expanded="false">
                                        [1]
                                <i class="fa fa-angle-down"></i>
                            </a>
                        </div>
     
                        <ul class="sub-menu" role="group">
                            <li>
                                <div>
                                    <a href="#">Adresse</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Téléphone Téléphone Téléphone Téléphone</a>
                                    </div>
                                </li>
                            <li>
                                <div>
                                    <a href="#">e-mail</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>
                            <a href="#">Nos cours</a>
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="#">Menu 3</a>
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="#">Encore un beau menu 4</a>
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="#">Contact</a>
                        </div>
                    </li>
                </ul>
            </nav>
     
        </section>
    Ceci fonctionne bien, mais il y a deux menu qui se déroule et quand je clique sur le premier et sur le deuxième, le premier ne se ferme pas.

    J'aimerais savoir comment je pourrais modifier mon code jquery pour qu'il ferme tous les menus ouvertes sauf celui qui a été cliqué.
    Dans mon cas, j'en ai deux (ou trois car j'ai un sous-sous menu)

    D'ailleur, petit complication: quand je clique sur un sous-sous menu, il ne devrait pas fermé son menu parent.
    Et s'il y a trois sous-menu, tous les menus parent à se dernier doivent rester ouvert.

    Il faudrait donc que tous les autres menus du premier du premier niveaux se ferment (et leurs sous-menu enfant).

    Voyez-vous?

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

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 155
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

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

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 155
    Points : 4 166
    Points
    4 166
    Par défaut
    Bonjour,

    Avec la syntaxe de chaînage, ce code est fonctionnel :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $('.dropdown-toggle').click(function(e) {
      e.preventDefault();
      $(this).toggleClass('toggle-on')
        .attr('aria-expanded',
          $(this).attr('aria-expanded') === 'false' ? 'true' : 'false'
        )
        .find('.fa').toggleClass('fa-angle-down fa-angle-up')
        .closest('div').eq(0).next('.sub-menu').toggleClass('toggled-on')
        .closest('.hasChildren').eq(0).siblings(".hasChildren")
        .find('.dropdown-toggle').eq(0).removeClass('toggle-on').attr('aria-expanded','false')
        .find('.fa').removeClass('fa-angle-up').addClass('fa-angle-down')
        .closest('div').eq(0).next('.sub-menu').removeClass('toggled-on');
    });
    Plus 3 lignes de CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .toggle-on{display:inline-block}
    .sub-menu{display:none}
    .sub-menu.toggled-on{display:block}

    Ça serait mieux si vous attribuez une classe au <div class="maclasse"> parent de l'élément .dropdown-toggle, comme ça vous pouvez remplacer closest("div") par closest('.maclasse')

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

    Informations forums :
    Inscription : mai 2005
    Messages : 3 080
    Points : 926
    Points
    926
    Par défaut
    Hello

    Merci beaucoup. Ca bien aidé mais il y avait un bug lorsque j'ajoutais plusieurs menu déroulant. Si je cliquais sur le troisième, le deuxième ne se refermait pas.
    Mais en creusant, j'ai réussi à faire ceci

    https://www.eco-sensors.ch/temp/e-panel/

    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
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
     
    ( function( $ ) {
     
    	$( '.dropdown-toggle' ).click( function( e ) {
    		e.preventDefault();
     
    		//console.log( e + ": " + $( this ).siblings('a').text() );
     
    		// Add or remove the toggled-on class and change the aria-expand status of the link
    		$(this).toggleClass('toggled-on').attr('aria-expanded',$(this).attr('aria-expanded') === 'false' ? 'true' : 'false')
        	.find('.fa').toggleClass('fa-angle-down fa-angle-up')
        	// find the closest parent div and go to the first ul.sub-menu, then add/remove the class toggled-on to the ué
        	.closest('div').eq(0).next('ul').toggleClass('toggled-on')
        	// Go up to the closest hasChildren class and look at all system/brother of .hasChildren
        	.closest('.hasChildren').eq(0).siblings(".hasChildren")
        	// Find .dropdown-toggle and do a forwach for all of them
        	.find('.dropdown-toggle').each(function(){
        		$('#breadcrumb').text('');
        		//$(this).css("background-color", "blue");
        		// remove the toggled-on class and change the axia-expanded status of each links
        		$(this).removeClass('toggled-on').attr('aria-expanded','false')
        		// change the icon
        		.find('.fa').removeClass('fa-angle-up').addClass('fa-angle-down')
        		// move up to the closest div and go to the next ul (ul.sub-menu) and remove the toggled-on class to close the menu
        		.closest('div').eq(0).next('ul').removeClass('toggled-on');
        	});
     
        	$('#breadcrumb').append(' / ' + $( this ).siblings('a').text());
     
    	} );
     
    })( jQuery );
    Qu'en pensez-vous?
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 155
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

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

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 155
    Points : 4 166
    Points
    4 166
    Par défaut
    Bonjour,

    Mes remarques :
    • Si vous cliquez plusieurs fois sur le même (menu/sous menu), le texte de #breadcrumb se répète tant de fois...,, c'est parce que vous utilisez append, essayez de le remplacer par text()
    • Vous obligez l'utilisateur à cliquer sur la flèche pour afficher les menus, ce qui n'est pas vraiment approprié, normalement le menu doit s'afficher lors d'un clic sur le <div> parent.
    • Le (margin/padding) gauche des sous menu doit augmenter un peu, afin de séparer les éléments à l'affichage.

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

Discussions similaires

  1. [2.x] Charger dynamiquement les éléments d'un menu dans un layout
    Par Jiraiya42 dans le forum Symfony
    Réponses: 1
    Dernier message: 29/08/2011, 00h51
  2. Réponses: 1
    Dernier message: 03/06/2008, 11h38
  3. Activer / griser les éléments d'un menu
    Par Silverstone dans le forum Visual C++
    Réponses: 4
    Dernier message: 05/11/2006, 00h16
  4. "Assembler" les éléments d'un menu javascript (.js + .css)
    Par beegees dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 02/06/2006, 11h15
  5. Réordrer les éléments d'un menu après suppression
    Par p0Kep0K dans le forum Requêtes
    Réponses: 3
    Dernier message: 03/11/2005, 18h43

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