Accéder à un sous-div d'un div [Débutant(e)]

**rambc** · 15/11/2010, 13h47

Bonjour,
dans ce post, on m' a fourni un moyen de plier-déplier un contenu. Je voudrais améliorer ce code. Pour cela, j'aurais besoin de deux choses :

Dans le code ci-dessous, je voudrais faire référence à content relativement à fold_1, ou bien relativement à fold_2 séparément. Ceci serait pour voir comment on fait ce genre de chose directement.
Plus important, je voudrais que cette référence soit utilisable dans l'extrait de code donné ci-dessous. L'idée serait de créer un code JS générique où il serait fait référence aux div dont la classe commence par fold.

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
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".fold_1").click(function(){
                    ??contenuDeFold_1??.show();  <---- Ma question...
                });
            });
        </script>
    </head>
 
    <body>
 
<div class="fold_1">Un bon début ?
    <div class="content">
        Bla, bla....
 
        <div class="fold_2">Un meilleur départ ?
            <div class="content">
                Oh, ah....
            </div>
        </div>
    </div>
</div>
 
    </body>
</html>

**scourjean** · 15/11/2010, 14h01

Ceci te convient-il ?

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('div[class^="fold"]').click(function(){
					$(this).children(".content").show();
                });
            });
        </script>
		<style type="text/css">
		.content{
			display:none;
		}
		</style>
    </head>
    <body>
		<div class="fold_1">Un bon début ?
			<div class="content">
				Bla, bla....
 
				<div class="fold_2">Un meilleur départ ?
					<div class="content">
						Oh, ah....
					</div>
				</div>
			</div>
		</div>
    </body>
</html>

**rambc** · 15/11/2010, 14h30

Merci mais... En fait, j'ai l'exemple suivant :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!--
Sources :
    http://www.developpez.net/forums/d995664/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/folding-editeurs-programmes/#post5578498
    http://www.developpez.net/forums/d999768/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/debutant-acceder-sous-div-div/#post5591994
-->
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
 
        <script type="text/javascript">
            $(document).ready(function(){
                $('div[class^="fold"]').click(function(){
                    $(this).children(".content").toggle();
                });
            });
        </script>
    </head>
 
    <body>
Un exemple vite fait.
<br/><br/>
x = 5
<br/><br/>
<div class="fold_1" style="cursor:pointer;">def function(bidon):
    <div class="content">
        <br/>    """
        <br/>    Un petit commentaire...
        <br/>    """
        <br/>    print('Cette fonction est bidon...')
 
        <div class="fold_2" style="cursor:pointer;">for i in range(5):
            <div class="content">
            <br/>    print(i)
            </div>
        </div>
    </div>
</div>
<br/>y = 2
 
    </body>
</html>

Quand on clique sur le div fold_1, tout s'affiche et s'efface comme prévu.

Par contre, si le contenu de fold_1 est visible, alors si je clique sur fold_2, alors tout le contenu de fold_1 est caché alors que je ne souhaiterais cacher que le contenu de fold_2.
Comment faudrait-il faire évoluer le code qui pour le coup a une réaction logique ?

Je vais repartir du code du post cité ci-dessus en y ajoutant la méthode précédente.

**rambc** · 15/11/2010, 14h36

Mon problème se complique... J'ai le code suivant :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!--
Sources :
    http://www.developpez.net/forums/d995664/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/folding-editeurs-programmes/#post5578498
    http://www.developpez.net/forums/d999768/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/debutant-acceder-sous-div-div/#post5591994
-->
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
 
        <script type="text/javascript">
            $(document).ready(function(){
                $('div[class^="fold"]').click(function(){
                    $(this).children(".content:first-child").toggle();
                });
            });
        </script>
 
        <script type="text/javascript">
            $(document).ready(function(){
                // Si on clique sur un extrait
                $('div[class^="fold"]').click(function(){
                    // On cache l'extrait et on affiche le texte complet
                    $(this).hide();
                    $(this).next().show();
                });
                // Si on clique sur un extrait complet
                $('div[class^="content_fold"]').click(function(){
                    // On cache le texte complet et on affiche l'extrait
                    $(this).hide();
                    $(this).prev().show();
                });
            });
        </script>
    </head>
 
    <body>
<div class="fold_1" style="cursor:pointer;">+ def function(bidon):</div>
<div class="content_fold_1" style="display:none;">
    - def function(bidon):
    <br/>    """
    <br/>    Un petit commentaire...
    <br/>    """
    <br/>    print('Cette fonction est bidon...')
    <div class="fold_2" style="cursor:pointer;">+ for i in range(5):</div>
    <div class="content_fold_2" style="display:none;">
        - for i in range(5):
        <br/>    print(i)
    </div>
</div>
 
    </body>
</html>

Le souci que je rencontre est que lorsque je vais cliquer sur content_fold_2, automatiquement je clique sur content_fold_1...

Il va falloir que je revoie ma façon de faire. Pour cela, il faudrait que je récupère le nom de la classe cliquée dans une variable JS. Comment fait-on ?

**rambc** · 15/11/2010, 17h40

La suite est ici.

Accéder à un sous-div d'un div [Débutant(e)]

jQuery

Discussions similaires

Partager

Partager