Ajouter style="display: block;" dans une div

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 8 Janvier 2020.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    778
    J'aime reçus:
    9
    Salut à tous,

    Bonne année à tous.

    J'ai un menu pour mobile avec des <li> et lorsqu'on clique dessus je voudrais ajouter un style dans une div.

    Ma div :
    Code:
    <div class="submenu">
    Je voudrais onclick sur <li> ajouter ce code dans cette div :
    Code:
    <div class="submenu" style="display: block;">
    Et si on re-click sur la <li>, ça donne ça :
    Code:
    <div class="submenu" style="display: none;">
    Et ainsi de suite...

    Peut-on faire cela en jquery ?

    Merci pour votre aide.
     
    #1 poupilou, 8 Janvier 2020
    Dernière édition: 8 Janvier 2020
  2. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    778
    J'aime reçus:
    9
    Alors le code jquery ci-dessous ajoute le style="display: none;" dans la div .submenu mais ça ouvre toutes les div .submenu de mes lignes <li>, comment faire pour que ça n'ouvre que la div .submenu qui correspond à ma <li> ?
    J'ai 5 <li>.
    Code:
    $(".submenu").attr("style", "display:block");
     
    #2 poupilou, 8 Janvier 2020
    Dernière édition: 8 Janvier 2020
  3. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 393
    J'aime reçus:
    179
    Affiche le code complet de ton menu avec les <li>, là ce n'est pas clair pour moi.
     
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    778
    J'aime reçus:
    9
    Voici la structure de mon menu (mega menu) :
    Code:
    <div class="nav-overflow">
                                <nav>
                                    <ul>
                                        <li class="full-width">
                                            <a href="../">Accueil</a><i class="fa fa-chevron-down"></i>
                                            <div class="submenu">
                                                <div class="full-width-menu-items-right2">
                                                    <img src="../images/gemmes-infos-logo.png" alt="Gemmologue" title="Gemmologue" width="280" height="95" border="0" />
                                                    <div class="full-width-menu-items-right2-texte">Pierres Précieuses & Pierres Fines</div>
                                                </div>
                                                <div class="full-width-menu-items-left">
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <ul class="list-type-1 toggle-list-container"><li><a href="../presentation.html" title="Qui sommes nous ?"><i class="fa fa-angle-right"></i>Qui sommes nous ?</a></li>
                                                                <li><a href="../contact.html" title="Formulaire contact"><i class="fa fa-angle-right"></i>Formulaire contact</a></li>
                                                                <li><a href="../plan.html" title="Le plan du site"><i class="fa fa-angle-right"></i>Le plan du site</a></li>
                                                                <li><a href="../faq.html" title="Questions fréquentes"><i class="fa fa-angle-right"></i>Questions fréquentes</a></li>
                                                                <li><a href="../newsletter.html" title="La newsletter"><i class="fa fa-angle-right"></i>La newsletter</a></li>
                                                                <li><a href="../temoignages-clients.html" title="Témoignages Clients"><i class="fa fa-angle-right"></i>Témoignages Clients</a></li>
                                                                <li><a href="../mentions-legales.html" title="Mentions Légales"><i class="fa fa-angle-right"></i>Mentions Légales</a></li>
                                                                <li><a href="../politique-confidentialite.html" title="Politique de confidentialité"><i class="fa fa-angle-right"></i>Politique de confidentialité</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="submenu-links-line">
                                                    <div class="submenu-links-line-container">
                                                        <div class="cell-view">
                                                            <div class="red-message"><b>Négoce de Pierres Précieuses & de Pierres Fines depuis 21 ans.</b></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="full-width">
                                            <a href="../vente/">Vente de pierres</a><i class="fa fa-chevron-down"></i>
                                            <div class="submenu">
                                                <div class="full-width-menu-items-right">
                                                    <div><img src="../images/pierres-precieuses.jpg" alt="Pierre Précieuse" title="Pierre Précieuse" width="500" height="320" border="0" /></div>
                                                </div>
                                                <div class="full-width-menu-items-left">
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="submenu-list-title opened">Notre Stock de Pierres<span class="toggle-list-button"></span></div>
                                                            <ul class="list-type-1 toggle-list-container"><li><a href="../vente/vente-aiguemarine.html" title="Aigue-marine"><i class="fa fa-angle-right"></i>Aigue-marine</a></li>
                                                                <li><a href="../vente/vente-amethyste.html" title="Améthyste"><i class="fa fa-angle-right"></i>Améthyste</a></li>
                                                                <li><a href="../vente/vente-citrine.html" title="Citrine"><i class="fa fa-angle-right"></i>Citrine</a></li>
                                                                <li><a href="../vente/vente-emeraude.html" title="émeraude"><i class="fa fa-angle-right"></i>émeraude</a></li>
                                                                <li><a href="../vente/vente-hessonite.html" title="Hessonite"><i class="fa fa-angle-right"></i>Hessonite</a></li>
                                                                <li><a href="../vente/vente-iolite.html" title="Iolite"><i class="fa fa-angle-right"></i>Iolite</a></li>
                                                                <li><a href="../vente/vente-mandarin.html" title="Mandarin"><i class="fa fa-angle-right"></i>Mandarin</a></li>
                                                                <li><a href="../vente/vente-morganite.html" title="Morganite"><i class="fa fa-angle-right"></i>Morganite</a></li>
                                                                <li><a href="../vente/vente-opale.html" title="Opale"><i class="fa fa-angle-right"></i>Opale</a></li>
                                                                <li><a href="../vente/vente-orthose.html" title="Orthose"><i class="fa fa-angle-right"></i>Orthose</a></li>
                                                                <li><a href="../vente/vente-peridot.html" title="Péridot"><i class="fa fa-angle-right"></i>Péridot</a></li>
                                                                <li><a href="../vente/vente-quartz.html" title="Quartz Rutile"><i class="fa fa-angle-right"></i>Quartz Rutile</a></li>
                                                            </ul>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="submenu-list-title opened">&nbsp;</div>
                                                            <ul class="list-type-1 toggle-list-container"><li><a href="../vente/vente-rubis.html" title="Rubis"><i class="fa fa-angle-right"></i>Rubis</a></li>
                                                                <li><a href="../vente/vente-saphir.html" title="Saphir"><i class="fa fa-angle-right"></i>Saphir</a></li>
                                                                <li><a href="../vente/vente-saphirdecouleur.html" title="Saphir De Couleur"><i class="fa fa-angle-right"></i>Saphir De Couleur</a></li>
                                                                <li><a href="../vente/vente-spinelle.html" title="Spinelle"><i class="fa fa-angle-right"></i>Spinelle</a></li>
                                                                <li><a href="../vente/vente-tanzanite.html" title="Tanzanite"><i class="fa fa-angle-right"></i>Tanzanite</a></li>
                                                                <li><a href="../vente/vente-topaze.html" title="Topaze"><i class="fa fa-angle-right"></i>Topaze</a></li>
                                                                <li><a href="../vente/vente-topazeimperiale.html" title="Topaze Impériale"><i class="fa fa-angle-right"></i>Topaze Impériale</a></li>
                                                                <li><a href="../vente/vente-tourmaline.html" title="Tourmaline"><i class="fa fa-angle-right"></i>Tourmaline</a></li>
                                                                <li><a href="../vente/vente-tsavorite.html" title="Tsavorite"><i class="fa fa-angle-right"></i>Tsavorite</a></li>
                                                                <li>&nbsp;</li>
                                                            <li>&nbsp;</li>
                                                            <li><a href="../vente/vente-pierres-gemmes.html" title="Toutes les Pierres"><i class="fa fa-angle-right"></i>Toutes les Pierres</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="submenu-links-line">
                                                    <div class="submenu-links-line-container">
                                                        <div class="cell-view">
                                                            <div class="line-links"><b>Liens Rapides :</b>  <a href="../vente/vente-rubis.html">Rubis</a>, <a href="../vente/vente-saphir.html">Saphir</a>, <a href="../vente/vente-emeraude.html">Emeraude</a>, <a href="../vente/vente-saphirdecouleur.html">Saphir de couleur</a>, <a href="../vente/vente-tanzanite.html">Tanzanite</a>, <a href="../vente/vente-tsavorite.html">Tsavorite</a></div>
                                                        </div>
                                                        <div class="cell-view">
                                                            <div class="red-message"><b>Vente de Pierres Précieuses & de Pierres Fines à prix grossiste</b></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </nav>
    </div>
    Tu trouveras ce menu sur mon site www.gem**mes-infos.com

    Lorsque tu navigues sur mon site avec un mobile, le mega menu est accessible en cliquant en haut à droite sur l'icone menu. Tu cliques ensuite sur les chevrons pour ouvrir les sous-menus. Le problème c'est lorsque tu cliques sur les liens textes (par exemple "Accueil") à gauche des chevrons, ça te renvoie vers l'url de cette page et ça ne t'ouvre pas le sous-menu. Je souhaite donc supprimer ces liens href et faire en sorte que lorsque les mobinautes cliqueront sur ces liens, ça ouvrira le sous-menu (comme lorsqu'on clique sur le chevron).

    Je dois donc enlever le lien dans la balise <a href="../">Accueil</a> et le remplacer par <a href="#">Accueil</a> et ajouter du code jquery afin que lorsqu'ils cliqueront sur ces liens textes ça ouvrira le sous-menu.

    J'ai ensuite un fichier javascript dans lequel il y a mes codes jquery, dont celui-ci qui ouvre les sous-menus lorsqu'on clique sur les chevrons :
    Code:
     $('nav li .fa').on('click', function(){
            if(_isresponsive){
                $(this).next('.submenu').slideToggle();
                $(this).parent().toggleClass('opened');
            }
        });
    
    J'ai modifié mes liens href en ajoutant une class "link_menu_mobile" comme cela <a href="#" class="link_menu_mobile">Accueil</a> et ajouter ce code jquery pour l'ouverture des sous-menus lorsqu'on clique sur mes liens textes :
    Code:
    $('.link_menu_mobile').on('click', function(){
            if(_isresponsive){
                $(this).next('.submenu').slideToggle();
                $(this).parent().toggleClass('opened');
                $(".submenu").attr("style", "display:block");
            }
        });
    
    En cliquant sur ce lien texte "Accueil", ça ouvre tous les sous-menus, comment faire pour que ça n'ouvre que le sous-menu de "Accueil" ?
     
  5. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 393
    J'aime reçus:
    179
    Mais si tu modifies juste comme ça ta 1ère fonction, ça ne marche pas ?

    Code:
     $('nav li a, nav li .fa').on('click', function(e) {
           if(_isresponsive){
               e.preventDefault();
               $(this).next('.submenu').slideToggle();
               $(this).parent().toggleClass('opened');
           }
       });
    
     
  6. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    778
    J'aime reçus:
    9
    J'ai testé ton code et lorsque je clique sur mon lien <a href="#">Accueil</a>, le chevron pivote à 180° mais le sous-menu ne s'ouvre pas dessous.
     
  7. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 393
    J'aime reçus:
    179
    Je pense que le next('.submenu') ne fonctionne pas bien (en ignorant le selector, jamais compris pourquoi), essaie de remplacer la ligne par :
    Code:
    $(this).parent().find('.submenu').slideToggle();
    
     
    poupilou apprécie ceci.
  8. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    778
    J'aime reçus:
    9
    Alors là BRAVO :) ça marche nickel avec $(this).parent().find('.submenu').slideToggle();

    Merci beaucoup pour ton aide.
     
    rick38 apprécie ceci.
  9. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    778
    J'aime reçus:
    9
    Je viens de m'apercevoir qu'avec le menu pour les mobiles on ne pouvait plus cliquer sur les liens <a href> qui sont dans les balises <li><a href="../ma-page.html">Ma page</a></li> ce qui est gênant puisque qu'on peut plus naviguer du tout sur le site par ce menu, comment résoudre ce problème ?
     
  10. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 393
    J'aime reçus:
    179
    Vous avez dit que cliquer sur ce lien était sensé ouvrir les sous-menus.
     
  11. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    778
    J'aime reçus:
    9
    Oui lorsque je cliquais sur le lien cela ouvrait bien le sous-menu mais lorsqu'on cliquait dans les liens du sous-menu il ne se passe rien, c'est comme si les liens du sous-menu était inexistant.

    Lorsque je cliquais sur le lien "Accueil", ça ouvrait bien le sous-menu, mais lorsque je cliquais sur le lien "Qui sommes nous ?" de ce sous-menu, il ne se passe rien et ça ne renvoie pas vers cette page et on ne peut accéder à cette page.
     
  12. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 393
    J'aime reçus:
    179
    Ah c'est parce que la fonction s'applique à tous les liens du menu. Ajoute un > ul > ici :

    Code:
    $('nav > ul > li a, nav li .fa').on('click', function(e) {
     
  13. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    778
    J'aime reçus:
    9
    Ca ne marche pas car mes liens qui sont dans mon sous-menu sont aussi dans des <ul> :
    Code:
     
    <ul class="list-type-1 toggle-list-container">
                      <li><a href="../presentation.html" title="Qui sommes nous ?"><i class="fa fa-angle-right"></i>Qui sommes nous ?</a></li>
                        <li><a href="../contact.html" title="Formulaire contact"><i class="fa fa-angle-right"></i>Formulaire contact</a></li>
                       <li><a href="../plan.html" title="Le plan du site"><i class="fa fa-angle-right"></i>Le plan du site</a></li>
                       <li><a href="../faq.html" title="Questions fréquentes"><i class="fa fa-angle-right"></i>Questions fréquentes</a></li>
                        <li><a href="../newsletter.html" title="La newsletter"><i class="fa fa-angle-right"></i>La newsletter</a></li>
                        <li><a href="../temoignages-clients.html" title="Témoignages Clients"><i class="fa fa-angle-right"></i>Témoignages Clients</a></li>
                        <li><a href="../mentions-legales.html" title="Mentions Légales"><i class="fa fa-angle-right"></i>Mentions Légales</a></li>
                        <li><a href="../politique-confidentialite.html" title="Politique de confidentialité"><i class="fa fa-angle-right"></i>Politique de confidentialité</a></li>
    </ul>
    
    Il faudrait un code qui cible la class="list-type-1 toggle-list-container" afin que ces liens là soient cliquables.
     
  14. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 393
    J'aime reçus:
    179
    nav > ul > li a signifie de prendre seulement les <ul> qui sont un niveau au-dessous de <nav> donc ça ne devrait pas prendre le sous-menu car il n'est pas directement sous <nav>.

    Sinon ajoute une classe, a priori les <li> concernés ont "full-width", donc peut-être nav ul li.fullwidth a
     
  15. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    778
    J'aime reçus:
    9
    J'ai essayé les combinaisons de codes ci-dessous mais ça ne marche pas correctement.
    Code:
        $('nav ul li.fullwidth a, nav li .fa').on('click', function(e) {
           if(_isresponsive){
               e.preventDefault();
               $(this).parent().find('.submenu').slideToggle();
               $(this).parent().toggleClass('opened');
           }
       });
    
    Pour ce code ci-dessus, lorsque je clique sur le lien du menu ça renvoie directement vers la page du lien de ce menu (pas d'ouverture du sous-menu).
    Code:
        $('nav > ul > li.fullwidth a, nav li .fa').on('click', function(e) {
           if(_isresponsive){
               e.preventDefault();
               $(this).parent().find('.submenu').slideToggle();
               $(this).parent().toggleClass('opened');
           }
       });
    
    Même chose pour ce code.
    Code:
        $('nav > ul > li a, nav ul li.fullwidth a, nav li .fa').on('click', function(e) {
           if(_isresponsive){
               e.preventDefault();
               $(this).parent().find('.submenu').slideToggle();
               $(this).parent().toggleClass('opened');
           }
       });
    
    Pour ce code ci-dessus, lorsque je clique sur le lien du menu, il ouvre bien le sous-menu, mais les liens du sous-menu ne sont plus cliquables.
    Code:
        $('nav > ul > li a, nav > ul > li.fullwidth a, nav li .fa').on('click', function(e) {
           if(_isresponsive){
               e.preventDefault();
               $(this).parent().find('.submenu').slideToggle();
               $(this).parent().toggleClass('opened');
           }
       });
    
    Même chose pour ce code.
     
  16. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 393
    J'aime reçus:
    179
    C'est li.full-width, pas li.fullwidth
     
  17. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    778
    J'aime reçus:
    9
    J'ai essayé avec li.full-width mais ça ne fonctionne pas correctement.

    J'ai trouvé une solution en rajoutant dans le lien <a href> de mes menus une class="menu_link", ce qui donne <a href="../" class="menu_link">Accueil</a> et ensuite je cible cette class par ce code jquery :
    Code:
        $('nav ul li a.menu_link, nav li .fa').on('click', function(e) {
           if(_isresponsive){
               e.preventDefault();
               $(this).parent().find('.submenu').slideToggle();
               $(this).parent().toggleClass('opened');
           }
       });
    
    Et là ça marche nickel :)

    Merci pour ton aide ;)
     
Chargement...
Similar Threads - Ajouter style=display block Forum Date
Ajouter des lignes de rich snippet - KK Star Référencement Google Hier à 10:54
WordPress Comment ajouter le CDN Cloudflare sur son site WP ? Administration d'un site Web 6 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
Ajouter un texte sur une carte Google Maps (JS) Développement d'un site Web ou d'une appli mobile 15 Janvier 2020
Ajouter les Rich Snippets sur Prestashop Débuter en référencement 28 Novembre 2019
Comment ajouter une page Facebook en tant que co-organisateur ? Facebook 22 Octobre 2019
Ajouter compte GA + ID de suivi existants Google Analytics 21 Octobre 2019
Ajouter un onglet personnalisé page Facebook avec application perso Facebook 16 Septembre 2019
WordPress Comment ajouter une meta author pour désigner l'auteur Référencement Google 22 Juillet 2019
Ajouter un if après un premier if très différent Développement d'un site Web ou d'une appli mobile 13 Juin 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice