Code non fonctionnel

Version imprimable

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:

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>

26/07/2017, 20h11
Invité

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:

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

Cela dit, on peut largement simplifier le code.

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

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:

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>

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

Code:

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

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

Code:

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:

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

Code:

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 ;)

26/07/2017, 21h32
Jacques38

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

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

Code:

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:

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:

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...

26/07/2017, 21h56
Jacques38

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).
26/07/2017, 22h15
Invité

Dans la version "sans CSS", si le JavaScript est désactivé, le div sera affiché "par défaut".
C'est celle à privilégier.
26/07/2017, 22h20
Jacques38

Bonne remarque. ;-) Merci encore.