11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] [JQUERY] Faire disparaître des sections

Bonjour,

Le cas que je rencontre aujourd'hui est le suivant :
J'ai un code Jquery qui fait apparaître une section lorsque je clique sur un élément HTML. Ce code est le suivant :

<script>
        $(function(){
            $('.accueil-button').on('click',function(){
                $("#apparition").html( $(this).find("nav").html() );
//Apparition du menu général au clic sur un bouton
                 
                $('.exemple').click(function(){
                    console.log('exemple');
                    $('.avant-dernier').addClass('expansion');
                    $('.dernier').addClass('disparition');
                    $('.avant-dernier').removeClass('exemple');
                    $(".expansion").html( $(this).find("nav").html() );
//Apparition du sous-menu à la place des 2 derniers éléments du menu général
 
                       $('i').click(function(){
                        console.log('i');
                       $('.avant-dernier').removeClass('expansion');
                       $('.dernier').removeClass('disparition');
//J'annule l'affichage du sous-menu au clic sur la croix pour revenir à mon menu général
                    });
                });
            });
        });
    </script>


J'ai l'impression que le code de ma dernière fonction (déclenchée par le clic sur la croix / i) fonctionne bien, mais que la fonction déclenchée par le clic sur .exemple se relance juste après.
J'ai placé quelques repères qui envoient des messages dans la console à l'exécution des 2 dernières fonctions pour essayer de comprendre le problème que je rencontre.
Voici les résultats : upload/1556009106-65880-15556815578335screenshot8.jpg
On constate qu'à chaque clic sur la croix la fonction i est exécutée (d'abord une fois au premier clic, puis 2, puis 3, c'est très étrange je ne comprends pas) et que la fonction exemple est exécutée par la suite. Je voudrais que la fonction déclenchée au clic sur i soit la dernière qui soit exécutée, mais ce n'est pas le cas

Pour mieux comprendre le problème, voici à quoi ça ressemble visuellement :
upload/1556009874-65880-15556816649928screenshot9.jpg
Avec i = la croix, .exemple = chacune des sections de la grille et #apparition = toute la section.

Quelqu'un peut-il m'aider ? Ce problème est assez compliqué à expliquer, n'hésitez pas à me demander des précisions si je me suis mal expliqué. Je suis assez novice en Jquery.

Un grand merci d'avance à tous ceux qui prendront le temps de me lire et de réfléchir à mon problème.
Modifié par Myrial (23 Apr 2019 - 11:00)
Salut,

il faudrait le code html pour mieux comprendre mais premièrement tu ne devrais pas imbriquer tout tes événements click comme tu le fais.

Généralement quand tu crées des événements tu utilises $(this) pour plier/déplier les éléments enfants relativement à l'élément sur lequel tu cliques.
Je n'avais pas mis le code HTML car il est assez long, mais le voici :
<div class="conteneur-buttons">



<button class="accueil-button difference b1 actif">
<p>Votre activité</p>
<svg class="svg-triangle">
  <polygon points="0,0 30,0 15,15" class="selection-triangle"/>
</svg>
<nav>



<div class="grid-parent">
<span class="exemple exemple2">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4>Imobilier</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">Agent immobilier</p>
</div></div>



</span><span class="exemple exemple2">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4 class="color-immo">Immobilier</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4 class="color-vv">Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4 class="color-reportages">Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">Hôtellerie et gîtes</p>
</div></div>



</span><span class="exemple exemple2">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4>Immobilier</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">E-commerce</p>
</div></div>



</div>
<div class="grid-parent2">
</span><span class="exemple ligne2">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4>Imobilier</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">Commerces et artisans</p>
</div></div>



</span>



<span class="exemple ligne2 avant-dernier">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4>Imobilier</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">Institutions</p>
</div></div>



</span><span class="exemple exemple2">
<nav class="sous-menu">
<i class="icon-home" style="color: #FF5D5D"></i>
<h3>Ce qu&rsquo;on vous propose</h3>
<ul>
<li>
<h4>Immobilier1</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Visite virtuelle</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>

<li>
<h4>Reportages</h4>
<p>Nos offres relatives à l&rsquo;immobilier sont nombreuses, nous vous proposons des services variés comme des photos, des vidéos.</p>
<a>En savoir plus</a>
</li>
</ul>
</nav>



<div class="wp-block-media-text alignwide dernier"><figure class="wp-block-media-text__media"><img src="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg" alt="" class="wp-image-12" srcset="http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-1024x682.jpg 1024w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-300x200.jpg  300w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280-768x512.jpg  768w,  http://azrael.sha.univ-poitiers.fr/~aguillot/wp/wp-content/uploads/2019/04/backstage-3331346_1280.jpg  1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure><div class="wp-block-media-text__content">
<p class="has-large-font-size">Lieux touristiques</p>
</div></div>



</span>



</nav>
</button>

Désolé pour l'indentation, c'est un code issu du code source je travaille avec Wordpress.

J'ai été contraint d'imbriquer mes événements car étant donné qu'ils s'appliquent à un code qui est généré par un événement préalable ils n'étaient pas fonctionnels si séparés. Concernant ce que tu me dis, je comprends l'idée mais j'ai un peu de mal à imaginer comment ce code peut fonctionner avec $(this). Aurais-tu un petit exemple à me donner ?
Merci encore d'essayer de m'aider. Je pense qu'en effet, commencer par éviter de tout imbriquer peut peut-être même résoudre le problème que je rencontre par la suite avec la croix.
Le problème dans ton code lorsque tu fais ceci : 

$('i').click(function(){
                        console.log('i');
                       $('.avant-dernier').removeClass('expansion');
                       $('.dernier').removeClass('disparition');
//J'annule l'affichage du sous-menu au clic sur la croix pour revenir à mon menu général
                    });

C'est que tu vas modifier les classes expansion et disparition sur tout les éléments avant-dernier et dernier. Peu importe où qu'ils soient dans le code. J'imagine que c'est pas ton idée.

J'ai fait un exemple au plus simple
https://codepen.io/Depassage/pen/MRqVgE

Note qu'il est aussi possible de fermer tous les autres .more avant d'ouvrir celui souhaité. J'ai l'impression que c'est ce que tu as voulu faire avec tes classes dernier et avant-dernier mais je n'en suis pas sur Smiley murf

Le principe de fadeToggle c'est de masquer l'élément quand il est affiché et vice versa. C'est plus simple car ça t'évite d'avoir à maintenir l'état de l'élément dans une variable de ce que tu veux afficher/masquer.

http://api.jquery.com/fadetoggle/
http://api.jquery.com/toggleclass/ (ou pour faire la même chose avec une class css)
Modifié par Depassage (23 Apr 2019 - 15:12)
Oh, je ne connaissais pas l'existence de fadeToggle. Je vais travailler là-dessus, il est possible que ça m'aide à résoudre mon problème final en effet. Merci à toi, je vais travailler dessus et je reviens vers vous pour lock le sujet ou exprimer mon niveau d'avancement Smiley cligne

Sinon, ça ne me dérangeait pas particulièrement de modifier les classes expansion et disparition sur tous les éléments "dernier" et "avant-dernier", c'était même l'objectif. Mon véritable problème, c'est que la fonction n°2 (celle qui s'enclenche supposément au clic sur .exemple) se réenclenche après mon clic sur la croix (cf. les messages de la console sur mon message plus haut), et donc annule les modifications que j'effectue avec la fonction enclenchée au clic sur la croix.
Modifié par Myrial (24 Apr 2019 - 10:28)
Comme ta balise <i> à l'air d'être imbriquée dans .exemple, je pense que ça doit déclencher les 2 events en même temps. Le plus simple dans ce cas c'est de faire un toggle sur exemple et d'enlever le js sur la balise <i>.
Je viens de travailler sur ce problème, et il s'avère que je suis obligé d'avoir du JS sur i.

Pour le message qui suit, prenons les dénominations suivantes :
Soit cet état l'état A du menu :
upload/1556094783-65880-screenshot16.jpg

Soit cet état l'état B du menu.
upload/1556095545-65880-1556009874-65880-155568166499.jpg


En état A, le clic sur n'importe laquelle des cellules de ma grille provoque l'état B. Une fois en état B, j'aimerais pouvoir repasser en état A en cliquant sur la croix, ou bien rester sur l'état B en cliquant sur les autres cellules ".exemple" pour avoir des infos différentes.
Mon vrai problème est la raison pour laquelle j'ai imbriqué les différents événements. En effet si je sépare l'appel d'événement de i des appels d'événements préalables, il n'est pas pris en compte (sûrement car i n'était pas généré à ce moment-là). Cependant, que ce soit avec un toggle ou avec l'effacement d'une classe, je ne vois pas comment éviter de mettre du js sur i.
J'ai essayé de raisonner à l'inverse comme ceci :
$('.exemple:not(.expansion, .disparition)').click(function(){
                    console.log('exemple');
                    $('.avant-dernier').addClass('expansion');
                    $('.dernier').addClass('disparition');
                    $('.avant-dernier').removeClass('exemple');
                    $('.grid-parent2').addClass('plus-grand');
                    $(".expansion").html( $(this).find("nav").html() );


L'objectif de ce code était d'empêcher que le clic sur .exemple soit capté à partir du moment où .exemple prend la classe .expansion ou .disparition. Malheureusement ça ne fonctionne pas et je ne vois pas pourquoi (quand je clique sur .expansion le clic est pris en compte).
Modifié par Myrial (24 Apr 2019 - 10:46)
Une bonne idée déjà serait de revoir ton code html car là tu fais quelque chose de très compliqué alors que c'est relativement simple :


<div class="service-bloc">
  <div class="trigger-additionnal-content">
    Ici au clic tu déclenches l'affichage de additionnal-content (utilise $(this) comme dans le pen que j'ai mis plus haut
  </div>
  <div class="additionnal-content">
    <i class="close-additionnal-content">Ici au clic tu fermes additionnal-content (toujours avec $this)</i>
    Lorem ipsum (Le texte)
  </div>
</div>

(Aussi tu ne peux pas coder correctement en nommant tes classes exemple, avant-dernier ou dernier, c'est incompréhensible même pour toi quand tu y reviendras plus tard)

Le js pour faire ça c'est quelques lignes (j'ai pas testé le code)


// Ouvrir
$('.trigger-additionnal-content').on('click',function(){  
  $(this).parent('.service-bloc').find('.additionnal-content').fadeToggle();  
});

// Fermer
$('.close-additionnal-content').on('click',function(){  
  $(this).parent('.additionnal-content').fadeToggle();  
});

Modifié par Depassage (24 Apr 2019 - 11:31)
Merci à toi, j'ai résolu mon problème avec une autre solution mais j'ai tout de même revu le nommage de mes classes comme tu me l'as conseillé.

La solution que j'ai employée était la suivante :
event.stopPropagation();


J'ai utilisé ce code à la fin de l'event du clic sur la croix, car il était déclenché en premier. Ainsi le clic sur la section n'est pas pris en compte.

Encore merci à toi, bonne continuation !
Sujet clos
Aller à