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

WRInaute passionné
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.
 
Dernière édition:
WRInaute passionné
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");
 
Dernière édition:
WRInaute passionné
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" ?
 
WRInaute passionné
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');
       }
   });
 
WRInaute passionné
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.
 
WRInaute passionné
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();
 
WRInaute passionné
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 ?
 
WRInaute passionné
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.
 
WRInaute passionné
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) {
 
WRInaute passionné
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.
 
WRInaute passionné
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
 
WRInaute passionné
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.
 
WRInaute passionné
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 ;)
 
Discussions similaires
Haut