Code non fonctionnel

**Jacques38** · 26/07/2017, 19h43

Bonjour,

J'essaie de créer un script très simple qui cache ou montre une div lorsqu'on clique sur une puce (schématisée ici par V ou K). La fonction qui cache marche bien et remplace effectivement la classe "reducteur_ouvert" par "reducteur_ferme". Mais la fonction qui montre n'est pas appelée au clic. Je ne comprends absolument pas où est le problème. Voici le code. Merci pour votre aide !

Jacques.

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
<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript' src='../js/jquery-3.2.1.js'></script>
</head>
<body>
<ul>
  <li><span class="reducteur_ouvert">V</span>
    <div>
      <ul>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </li>
 
</ul>
 
<script>
$(document).ready(function() {
  $(".reducteur_ferme").click(function(){
    $(this).removeClass("reducteur_ferme");
    $(this).addClass("reducteur_ouvert");
    $(this).text('V');
    ($(this).parent().children("div")).show();
  });
 
  $(".reducteur_ouvert").click(function(){
    $(this).removeClass("reducteur_ouvert");
    $(this).addClass("reducteur_ferme");
    $(this).text('K');
    ($(this).parent().children("div")).hide();
  });
});
</script>
</body>
</html>

Invité · 26/07/2017, 20h11

Bonjour,

La classe n'existe pas au départ dans le DOM.

Il faut se raccrocher à un élément présent. 'body' par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  $('body').on( 'click',  'reducteur_ouvert ', function(){

Cela dit, on peut largement simplifier le code.

Indices : .toggleClass(), .slideToggle(),...

**Jacques38** · 26/07/2017, 20h55

Merci bien pour votre réponse. J'ai corrigé le script comme ci-dessous, mais... plus rien ne se passe !... Je dois faire une erreur grossière...

En tout cas, je vois bien que votre argument est certainement le bon, mais je suis surpris (je suis quelque peu novice, comme vous vous en doutez) que les éléments en .reducteur_ferme doivent exister à l'ouverture de la page pour que le script s'applique. Je ne peux donc pas "travailler " sur un élément du DOM qui n'existe pas au départ ?... Merci encore.

Code :

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
 
<script>
$(document).ready(function() {
  $('body').on( 'click',  'reducteur_ferme', function(){
    $(this).removeClass("reducteur_ferme");
    $(this).addClass("reducteur_ouvert");
    $(this).text('V');
    ($(this).parent().children("div")).show();
  });
  $('body').on( 'click',  'reducteur_ouvert', function(){
    $(this).removeClass("reducteur_ouvert");
    $(this).addClass("reducteur_ferme");
    $(this).text('K');
    ($(this).parent().children("div")).hide();
  });
});
</script>

Invité · 26/07/2017, 21h20

Autant pour moi.
C'est (avec un point à '.reducteur_ouvert ') :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  $('body').on( 'click',  '.reducteur_ouvert ', function(){

voici un code plus concis, qui donne le même résultat :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<ul>
  <li><span class="reducteur">V</span>
    <div>
      <ul>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </li>
</ul>
</body>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.reducteur ~ div { display:none; }
.reducteur.ouvert ~ div { display:block; }

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(document).ready(function() {
  $('body').on( 'click', '.reducteur', function(){
    $(this).toggleClass('ouvert');
    $(this).text( ($(this).hasClass('ouvert')? 'V':'K') );
  });
});

A étudier

**Jacques38** · 26/07/2017, 21h32

Arf, j'aurais dû voir le . manquant ! Merci bien, ça marche parfaitement ainsi.

Invité · 26/07/2017, 21h42

Le même, sans CSS : (j'ai mis 'Ouvrir' / 'Fermer' : c'est plus clair)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<ul>
  <li><li><span class="reducteur">Ouvrir</span>
    <div>
      <ul>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </li>
</ul>
</body>

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(document).ready(function() {
  $('.reducteur ~ div').css({'display':'none'}); // on masque
  $('body').on( 'click', '.reducteur', function(){
    $(this).toggleClass('ouvert');
    $(this).siblings('div').toggle();
    $(this).text( (($(this).hasClass('ouvert'))? 'Fermer':'Ouvrir') );
  });
});

On peut assouplir l'ouverture/fermeture avec slideToggle() :

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(document).ready(function() {
  $('.reducteur ~ div').css({'display':'none'}); // on masque
  $('body').on( 'click', '.reducteur', function(){
    $(this).toggleClass('ouvert');
    $(this).siblings('div').slideToggle();
    $(this).text( (($(this).hasClass('ouvert'))? 'Fermer':'Ouvrir') );
  });
});

A tester...

**Jacques38** · 26/07/2017, 21h56

Merci beaucoup !

J'aime bien la version avec css, c'est assez élégant je trouve (mais il est vrai que c'est oui/non, ça ne permet pas "l'adoucissement" que vous proposez).

Invité · 26/07/2017, 22h15

Dans la version "sans CSS", si le JavaScript est désactivé, le div sera affiché "par défaut".
C'est celle à privilégier.

**Jacques38** · 26/07/2017, 22h20

Bonne remarque. ;-) Merci encore.

Code non fonctionnel

jQuery

Discussions similaires

Partager

Partager