faire disparaître et apparaître

**keokaz** · 19/07/2013, 15h13

Bonjour,
j'ai ce code html

Code html :

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

1
2
3
4
5
6
<div id="menu">
    <h1>menu !</h1>
</div>
<div id="wysi" >editer moi</div>
<button id="cacher">cacher</button>
<button id="montrer">montrer moi</button>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(
    function(){
        $('#menu').hide();
    },
    $('#montrer').on('click',montrer(this))
);
 
function montrer(e)
{
    e.show();
}

le menu n' a pas disparu, comment je dois l'initialiser ?

merci pour la réponse

**DJ Caësar 9114** · 19/07/2013, 16h37

Salut,
Ca marche ça?

Code :

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

1
2
3
4
5
6
7
8
$(document).ready(function(){
    function montrer(e) {
        e.show();
        }
 
    $('#menu').hide();
    $('#montrer').on('click',montrer(this));
});

**Bovino** · 19/07/2013, 16h52

Il y a peu de chances : le second paramètre de .on() dans ce cas doit être une référence à une fonction, pas un appel de fonction : Les fonctions de rappel (callback) ou les utilisations cachées de eval().
D'autre part, appeler e un paramètre d'une fonction de rappel d'un événement est plutôt dangereux : c'est le nom habituellement donné à l'objet event passé en paramètre automatique.

Code :

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

1
2
3
4
5
$(document).ready(function(){
    $('#montrer').on('click',function(){
        $(this).toggle();
    });
});

devrait être largement suffisant...

**keokaz** · 19/07/2013, 17h10

merci bovino

donc le e doit être obligatoirement une fonction.

par contre ce n'est pas le bouton montrer qu'il faut faire apparaître ou disparaître,
c'est le menu,
mon menu est visible, alors que je souhaite qu'il soit pour le moment invisible avant de cliquer sur montrer

**DJ Caësar 9114** · 19/07/2013, 17h46

Ah ok, je n'avais pas compris:

Code :

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

1
2
3
4
5
6
$(document).ready(function(){
    $('#menu').hide();
    $('#montrer').on('click',function(){
        $('#menu').toggle();
        });
});

**keokaz** · 20/07/2013, 08h17

merci beaucoup cela fonctionne,

toggle() est comme une méthode qui garde en mémoire la méthode appelé quel que soit l'action demandé?
qui si on l'a rappelle , appelle l'inverse de la méthode appellé

par contre j'ai essayer ceci

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
 
<!doctype>
<html>
<head>
<title>Event Propagation</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
 
$(document).ready(function(){
    var display = false;    
 
    $("#display").on({
        click : function(){
            if(display === false){
                $("#menu").hide(); 
                display = true;
            }
            else
           {
               $('#menu"').show();
               display= false;
           }
        alert(display);
        }
    });
});
</script>
</head>
 
<body onload="load();">
                <div id="menu">
                    <h1>menu !</h1>
                </div>
 
                <div id="wysi" >
                    editer moi
                </div>
 
                <button id="display">
                    cacher
                </button>
 
 
 
</body>
</html>

comment doit t' on s'y prendre pour garder la valeur display ? (ma valeur reste à true)

**danielhagnoul** · 20/07/2013, 09h53

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var boolDisplay = false;    // attention aux noms des variables
 
$( "#display" ).on( "click", function(){
 
    if( boolDisplay == false ){
        $( "#menu" ).hide(); 
        boolDisplay = true;
    } else {
       $( "#menu" ).show();
       	boolDisplay = false;
    }
 
    console.log( boolDisplay ); // ici display c'est l'ID display
});

faire disparaître et apparaître

jQuery

Vue hybride

Discussions similaires

Partager

Partager