petit exercice sur jquery

Version imprimable

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:

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>

20/08/2012, 18h04
SpaceFrog

Et ?
le code donné fonctionne ...
20/08/2012, 18h05
keokaz

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??
20/08/2012, 18h12
SpaceFrog

quel texte ?
toggle incult une animation de reduction

Dans mon cas il ne faut donc pas utiliser toggle?

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

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

20/08/2012, 18h32
dkmix

Bonjour,

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

Pour visibility:hidden :

Code:

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

merci dkmix en effet ça fonctionne

maintenant exercice 2, rajouter une liste supplémentaire

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

20/08/2012, 19h03
dkmix
Code:

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.