Alterner hide et show

Version imprimable

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 :oops:

Code:

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();
 
		}
 
	});
 
};

Bonsoir,

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

10/11/2011, 22h08
Bovino
Beaucoup de choses à redire...

Code:

window.onload = function()

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

1 2 var selecIsFocus = false; if (selectContainerList.hide()||(selecIsFocus!=true))
Tu peux expliquer à quoi sert cette condition ??? :calim2:
Puisque tu viens d'affecter à selecIsFocus la valeur false, comment pourrait-elle ne pas être différente de true 8O
D'autre part, quel est selon toi l'équivalent booléen de selectContainerList.hide() ?

Enfin bref... en plus simple :
Code:

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

merci ça fonctionne impecable avec ce ternaire...
Code:

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

10/11/2011, 22h20
Bovino

:koi:

Une aversion pour toggle() ?
10/11/2011, 22h22
dominos
Citation:
Envoyé par Bovino

Enfin bref... en plus simple :

Code:

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 ?
10/11/2011, 22h26
dominos

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
10/11/2011, 22h26
Golgotha

Citation:

Envoyé par Bovino

:koi:

Une aversion pour toggle() ?

C'est moi le plus beau c'est tout :aie:

:dehors:
10/11/2011, 22h34
Bovino

Citation:

Envoyé par Golgotha

C'est moi le plus beau c'est tout :aie:

Mouais... sauf que ta solution n'est valable que si les id sont uniques dans la page ! :rire:
10/11/2011, 22h40
Golgotha

Citation:

Envoyé par Bovino

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

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

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:

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();
	 }
 });
};

10/11/2011, 23h07
Bovino
Citation:

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

Désolé, mais je vois pas le rapport :koi:

Citation:

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

1 2 3 4 5 $(document).mousedown(function(e){ if(!(e.target.id == 'select_list' || $(e.target).parents('#select_list').length)){ selectContainerList.hide(); } });
10/11/2011, 23h19
dominos

j'utilise body car je souhaite que le code javascript/jquery reste entre les balise head
10/11/2011, 23h33
Bovino

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 :aie:
17/11/2011, 12h16
dominos

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

Citation:

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

Merci
17/11/2011, 13h47
Bovino

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.

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:

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

Citation:

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:

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(); });

17/11/2011, 16h28
dominos
Merci, en fait suffit de désigner le parent selectContainer:
Code:

1 2 3 $(selectContainer).mousedown(function() { selectContainerList.toggle(); });
mais ça crée un conflit avec lignes suivantes:

Citation:

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

du coup la liste ne souvre plus :(

Ci-dessous une illustration

http://cjoint.com/data/0KslseLRDW8_select.png

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:

Citation:

// 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:

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:

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.