petit exercice sur jquery

**keokaz** · 20/08/2012, 16h43

Bonjour j'ai vraiment du mal avec jquery, je vais essayer de faire des petite exercice

1 exercice = j'essaye de faire disparaître et apparaître un élément.

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
 
<!DOCTYPE html>
<html>
    <head>
        <style>
            p { background:#dad;
                font-weight:bold;
                font-size:16px; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
 
 
        <div id="menu">Menu
            <a class="cacher">je suis cacher</a>
        </div>
 
        <script>
            $("#menu").hover(function () {
                $(this).children().toggle("fast");
            });    
        </script>
 
    </body>
</html>

**SpaceFrog** · 20/08/2012, 17h04

Et ?
le code donné fonctionne ...

**keokaz** · 20/08/2012, 17h05

j'ai oublié de mettre la question , merci de ta réponse

,
ça fonctionne, mais pourquoi lorsque je survole menu, ce texte bouge de quelques pixels??

**SpaceFrog** · 20/08/2012, 17h12

quel texte ?
toggle incult une animation de reduction

**keokaz** · 20/08/2012, 17h18

Dans mon cas il ne faut donc pas utiliser toggle?

j'ai un autre script pour que cela soit plus explicite

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
 
<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <style>
            li
            {
                background: red;
                visibility: hidden;
 
            }
 
        </style>
    </head>
    <body>
        <div id="test">
            <a>survoler sur ce text pour voir la liste, pour le faire disparaître, le quitter</a>
            <ul>
                <li>
                    fruit
                </li>
                <li>
                    un legume
                </li>
                <li>
                    une ingrédient
                </li>
            </ul>
 
        </div>
 
 
        <script>
            $("#test a" ).hover(function(){
                $("ul").children().show();
            });
        </script>
 
    </body>
</html>

ce script ne fonctionne pas, quel est mon erreur ?

**dkmix** · 20/08/2012, 17h32

Bonjour,

~~visibility:hidden;~~ display:none; fonctionne

Pour visibility:hidden :

Code :

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

$("ul").children().css("visibility","visible");

**keokaz** · 20/08/2012, 17h41

merci dkmix en effet ça fonctionne

maintenant exercice 2, rajouter une liste supplémentaire

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>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <style>
            li
            {
                background: red;
                display: none;
            }
 
        </style>
    </head>
    <body>
        <div id="test">
            <a>survoler sur ce text pour voir la liste des Aliments, pour le faire disparaître, le quitter</a>
            <ul>
                <li>
                    fruit
                </li>
                <li>
                    un legume
                </li>
                <li>
                    une ingrédient
                </li>
            </ul>
 
            <a>survoler sur ce text  pour voir la liste des pièces, pour le faire disparaître, le quitter</a>
            <ul>
                <li>
                    PC
                </li>
                <li>
                    RAM
                </li>
                <li>
                   ecran
                </li>
            </ul>
 
        </div>
 
 
        <script>
            $("#test a" ).hover(function(){
                $("ul").children().show().mouseout(function(){
                    $(this).hide();
                });
            });
        </script>
 
    </body>
</html>

Quel est le moyen d'y arriver pour ne pas avoir toutes le listes ? est 'il judicieux de mettre les zones à survoler dans une table?

**dkmix** · 20/08/2012, 18h03

Code :

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

1
2
3
4
5
 $("#test a" ).hover(function(){
   $(this).next("ul").children().show().mouseout(function(){
        $(this).hide();
    });
});

... mais bon çà peut durer longtemps.. le mieux c'est de faire des tests en lisant l'api de jquery.
Vous pouvez utiliser jsfiddle pour tester en ligne des petits bouts de code, mettre des points d'arrêt dans firebug ou chrome.

Pour ce qui est des tables, c'est moins pratiques que les spans ou les divs, personnellement j'évite de les utiliser.

petit exercice sur jquery

jQuery

Discussions similaires

Partager

Partager