slideUp incluant Float left

**hikosei** · 07/05/2009, 18h03

Bonjour,

Je travaille actuellement sur une page web et je dois utiliser la méthode slideToggle() cependant j'ai constater un problème sur le slideUp comme dans l'exemple suivant :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    $("#locationBar").click(function () {
        $(this).next().slideToggle();
    });
  });
  </script>
 
</head>
 
<body  >
 
<div id="locationBar" >Location</div>
  <div>	
  		<div style=" float:left; width:200px; border:1px solid" >
	  		<p id="test2">test2</p>
			  <p>test3</p>
			  <p>test4</p>
			  <p>test5</p>
  		</div>
 
  		<div style=" float:left; width:200px; border:1px solid" >
	  		<p >test6</p>
			  <p>test7</p>
			  <p>test8</p>
			  <p>test9</p>
 
  		</div>
  </div>
 
 
</body>
</html>

Pour détails en gros dans mes div en réalité c'est une image avec une description a coté. La seul solution que je voie pour le moment c'est l"utilisation d'un tableau à la plce du float left.

Si quelqu'un a déja rencontrer ce problème et trouvé une meilleur solution je suis preneur

Merci d'avance pour votre aide

**Bovino** · 07/05/2009, 19h21

Code :

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

$(this).next().slideToggle();

Dans ton exemple, la div locationBar n'a pas de noeud frère.

**hikosei** · 07/05/2009, 21h19

Oki je vais tester en donnant un ID à la div suivante et l'utiliser.
Cependant, cependant je pense que j'ai une lacune car tu dis que je n'ai pas de noeud frère c'est a dire noeud au même niveau ou alors un noeud inclus a l'intérieur ?

Parce qu'ils me semble que la div juste après serait un noeud frère si c'est dans le cas du même niveau ? je me trompe ?

**danielhagnoul** · 07/05/2009, 21h28

Bonsoir.

Voici un exemple :

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
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#locationBar").click(function(){
            $("#toggleMe").slideToggle("slow");
        });
    });
</script>
 
<div id="locationBar" style="width:600px; height:60px; background-color:#33FF99; border:1px solid #000000;">
    Location
</div>
<div id="toggleMe" style="width:200px; height:200px; background-color:#FFFFCC; border:1px solid #000000;">
    <p>&nbsp;</p>
</div>

**hikosei** · 07/05/2009, 21h53

Merci beaucoup grâce a toi j'ai trouver pourquoi ça ne marchait pas de mon coté apparament il est important de préciser le height de la div avec l'id toggleme sinon ça ne fonctionnera pas, apparament avec les float, il n'arrive pas as trouver ce qu'il faut

merci en tout cas demain je serais plus coincé au boulot !

PS: pour les noeuds frère je suis quand même preneur d'une explication