Alterner hide et show

**dominos** · 10/11/2011, 21h41

Bonsoir,

je cherche à alterner (show/hide) l'affichage d'une div par l'évenement mousedown d'une image bouton.

j'ai l'impression de tourner en rond

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
window.onload = function() {
 
	var selectContainerList = $('#select_list'); // div (show/hide)
	var selectContainerBtn = $('#select_btn'); // img bouton
 
	$(selectContainerBtn).mousedown(function() {
 
		var selecIsFocus = false;
 
		if (selectContainerList.hide()||(selecIsFocus!=true)) {
			selectContainerList.show();
			selecIsFocus = true;	
		}
		else if (selectContainerList.show()||(selecIsFocus!=true)) {
			selectContainerList.hide();
 
		}
 
	});
 
};

**Golgotha** · 10/11/2011, 22h05

Bonsoir,

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
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
  <script type="text/javascript">
 
 
     $(document).ready(function() {
  		$("#image").click(function () { 
      		$("#texte").is(":visible") ? $("#texte").hide() : $("#texte").show();
    		});
 		});
 
  </script>
 </head>
 <body>
 
 
 	<img id="image" src="http://www.lesite.com/telechargements/photos/44857_bestiole.png">
 	<div id="texte">
 
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
 
 	</div>
 
 </body>
</html>

**Bovino** · 10/11/2011, 22h08

Beaucoup de choses à redire...

Code :

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

window.onload = function()

Tu devrais commencer par les fondamentaux : $.ready()...

Code :

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

1
2
var selecIsFocus = false;
	if (selectContainerList.hide()||(selecIsFocus!=true))

Tu peux expliquer à quoi sert cette condition ???

Puisque tu viens d'affecter à selecIsFocus la valeur false, comment pourrait-elle ne pas être différente de true

D'autre part, quel est selon toi l'équivalent booléen de selectContainerList.hide() ?

Enfin bref... en plus simple :

Code :

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

1
2
3
4
5
$(function(){
    $('#select_list').mousedown(function(){
        $('#select_btn').toggle();
    });
});

**dominos** · 10/11/2011, 22h16

merci ça fonctionne impecable avec ce ternaire...

Code :

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

1
2
selectContainerList.is(":visible")?selectContainerList.hide()
:selectContainerList.show();

**Bovino** · 10/11/2011, 22h20

Une aversion pour toggle() ?

**dominos** · 10/11/2011, 22h22

Envoyé par Bovino

Enfin bref... en plus simple :

Code :

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

1
2
3
4
5
$(function(){
    $('#select_list').mousedown(function(){
        $('#select_btn').toggle();
    });
});

fonctionne très bien aussi avec toggle();

que fait exactement cette fonction ?

**dominos** · 10/11/2011, 22h26

merci g trouvé la doc : http://jquery.jarodxxx.com/manuel/Le...ements/toggle/

je suis pas expert dans ces domaines j'apprend sur le tas.

merci pour ces conseils

**Golgotha** · 10/11/2011, 22h26

Envoyé par Bovino

Une aversion pour toggle() ?

C'est moi le plus beau c'est tout

**Bovino** · 10/11/2011, 22h34

Envoyé par Golgotha

C'est moi le plus beau c'est tout

Mouais... sauf que ta solution n'est valable que si les id sont uniques dans la page !

**Golgotha** · 10/11/2011, 22h40

Envoyé par Bovino

Mouais... sauf que ta solution n'est valable que si les id sont uniques dans la page !

t'es jaloux parce que tu sais pas coder avec des id multiples c'est tout

**dominos** · 10/11/2011, 22h49

Autre pb, qd je clique ailleurs que dans le bouton et la div, je voudrais que la div se ferme, c'est pour ça que j'aivais une variable focus.

load c'est parce que j'utilise $(document.body).

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
window.onload = function() {
	var selectContainerList = $('#select_list'); // div
	var selectContainerBtn = $('#select_btn'); // img
 
	$(selectContainerBtn).mousedown(function() {
      selectContainerList.toggle();
	});
 
	 $(document.body).mousedown(function() {
		 if (selectContainerList.has(this).length == 0) {
		 //le click est en dehors du container; tu le hide
			 selectContainerList.hide();
	 }
 });
};

**Bovino** · 10/11/2011, 23h07

load c'est parce que j'utilise $(document.body)

Désolé, mais je vois pas le rapport

qd je clique ailleurs que dans le bouton et la div, je voudrais que la div se ferme

Code :

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

1
2
3
4
5
$(document).mousedown(function(e){
    if(!(e.target.id == 'select_list' || $(e.target).parents('#select_list').length)){
        selectContainerList.hide();
    }
});

**dominos** · 10/11/2011, 23h19

j'utilise body car je souhaite que le code javascript/jquery reste entre les balise head

**Bovino** · 10/11/2011, 23h33

C'est louable, mais je ne vois toujours pas le rapport...

La méthode ready() (ou ses équivalents) peut être dans le head, ça n'empêchera pas qu'elle sera appelée quand la page sera chargée.
$(document.body).mousedown( ici body n'est pas très utile : je te mets au défi de cilquer ailleurs que sur un élément du body dans la page

**dominos** · 17/11/2011, 12h16

Merci pour ces info, dans l'exemple que vous donnez, que fait cette ligne svp ?

... $(e.target).parents('#select_list').length)){

Merci

**Bovino** · 17/11/2011, 13h47

e.target retrouve l'élément DOM sur lequel l'événement s'est produit.
$(e.target) transforme l'élément DOM en "élément" jQuery.
.parents('#select_list') sélectionne parmi les balises ancêtre celles dont l'identifiant est "select_list".
.length renvoie le nombre d'éléments trouvés, s'il n'y en a pas, length vaut zéro donc on rentre dans la condition et si tu cliques sur un élément qui n'est pas select_list ou qui n'est pas inclut dans select_list, ça masque la div.

**dominos** · 17/11/2011, 14h08

c'est vraiment bien ça, en désignant la liste ça englobe également les checkbox qui se trouve à l'intérieur.

juste une dernière question...

Code :

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

1
2
3
4
5
6
7
 		var selectContain = $('#select'); // div
	var selectContainerList = $('#select_list'); // div
	var selectContainerBtn = $('#select_btn'); // img
 
	$(selectContainerBtn).mousedown(function() {
      selectContainerList.toggle();
	});

Permet d'alterner l'affichage de la liste, l'image bouton se trouve dans une div, je voudrais que lorsqu'on down aussi sur la div, ça réagisse comme le bouton. Si je demande conseil pour cela c'est parce que c'est un peu nouveau pour moi la gestion des évènements et je ne sais pas comment gérer une condition IF depuis le code ci-dessus, et aussi parce qu'un exemple m'apprend beaucoup...

En tout cas merci encore pour toutes ces info.

Merci

**Hijack** · 17/11/2011, 15h28

Envoyé par dominos

...l'image bouton se trouve dans une div, je voudrais que lorsqu'on down aussi sur la div, ça réagisse comme le bouton...

Si je comprend bien tu voudrais appliquer ".mousedown(...)" à '#select_btn' et à '#select' ?

Dans ce cas tu peux faire une sélection multiple comme ceci :

Code :

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

1
2
3
4
5
6
7
8
var selectContain = $('#select'); // div
var selectContainerList = $('#select_list'); // div
var selectContainerBtn = $('#select_btn'); // img

$(selectContainerBtn + ' ' + selectContain).mousedown(function() {
selectContainerList.toggle();
});

**dominos** · 17/11/2011, 16h28

Merci, en fait suffit de désigner le parent selectContainer:

Code :

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

1
2
3
$(selectContainer).mousedown(function() {
      selectContainerList.toggle();
	});

mais ça crée un conflit avec lignes suivantes:

$(document).mousedown(function(e){
if(!(e.target.id == selectContainerList || $(e.target).parents('#flt_select').length)){
selectContainerList.hide();
}
});

du coup la liste ne souvre plus

**dominos** · 18/11/2011, 11h35

Ci-dessous une illustration

Le but donc est de cliquer sur la div (select(1) ou le bouton(2)) et alterner l'ouverture de la div liste (3). On peu alors sélectionner les radios ou checks sans qu'elle se ferme...

Si on clique sur le document en dehors de la liste ouverte, la liste se ferme.

Le soucis rencontré est que le clique sur le sélect n'est pas pris en compte pour ouvrir la liste mais seulement si je supprime ces lignes:

// si down ailleur que sur le select, la liste, le bouton
$(document).mousedown(function(e){
if(!($(e.target).parents('#flt_select').length)){
selectList.hide();
}
});

Le code :

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
$(document).ready(function() {
 
	var select = $('#flt_select'); // div
	var selectBtn = $('#flt_select_btn'); // img
	var selectList = $('#flt_select_list'); // div
 
	// Si down sur div select ou bouton
	$(select).mousedown(function() {
      selectList.toggle();
	});
 
	// si down ailleur que sur le select, la liste, le bouton
	$(document).mousedown(function(e){
	    if(!($(e.target).parents('#flt_select').length)){
	        selectList.hide();
	    }
	});
 
	// Si : Echap
	$(document).keydown( function() { 
		if (event.keyCode == 27) {
			selectList.hide();
		}		
	});
 
});

Code :

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

1
2
3
4
5
6
<div id="select" class="select">
 <img id="select_btn" class="select_btn" src="public/images/select_btn.png">
 <div class="select_list" id="select_list" >
 ...radio...ou check
</div>
 </div>

Merci de votre aide.

Alterner hide et show

jQuery

Discussions similaires

Partager

Partager