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:
    892
    J'aime reçus:
    13
    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:
    892
    J'aime reçus:
    13
    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 777
    J'aime reçus:
    269
    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:
    892
    J'aime reçus:
    13
    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 777
    J'aime reçus:
    269
    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:
    892
    J'aime reçus:
    13
    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 777
    J'aime reçus:
    269
    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:
    892
    J'aime reçus:
    13
    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:
    892
    J'aime reçus:
    13
    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 777
    J'aime reçus:
    269
    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:
    892
    J'aime reçus:
    13
    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 777
    J'aime reçus:
    269
    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:
    892
    J'aime reçus:
    13
    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 777
    J'aime reçus:
    269
    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:
    892
    J'aime reçus:
    13
    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 777
    J'aime reçus:
    269
    C'est li.full-width, pas li.fullwidth
     
  17. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    892
    J'aime reçus:
    13
    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
Quelle solutions pour ajouter un annuaire de membre Développement d'un site Web ou d'une appli mobile Hier à 22:53
comment ajouter politique de confidentialité a tarteaucitron Développement d'un site Web ou d'une appli mobile 31 Juillet 2021
Linkedin : comment ajouter une URL sur une image ? Autres réseaux sociaux 1 Juin 2021
Ajouter des liens externes : bonne pratique SEO ? Rédaction web et référencement 27 Avril 2021
Protection de site web : quel code ajouter dans htaccess ? URL Rewriting et .htaccess 5 Mars 2021
Comment ajouter un blog pour le SEO sur un site statique ? Demandes d'avis et de conseils sur vos sites 20 Janvier 2021
Ajouter des liens internes sitewide en cloaking Netlinking, backlinks, liens et redirections 2 Décembre 2020
Ajouter des lignes de rich snippet - KK Star Référencement Google 31 Mars 2020
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