Ajout de tableau et exécution

**pierrot10** · 15/07/2010, 10h01

Bonjour à tous,
J'ai besoin de vos lumières pour comprendre un problème.
J'ai adapter un menu acordéon avec jQuery.

Mon code js est le suivant :

Code JS :

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
 
// JavaScript Document
 
$(document).ready( function () { 
 
    // On cache les sous-menus : 
    //$(".navigation ul.subNavigation").hide(); 
	// sauf celui qui porte la classe "open_at_load" : 
    $("ul.objectName ul.objectDescription:not('.open')").hide(); 
 
	// et on remplace l'élément span qu'ils contiennent par un lien : 
/*    
	$(".navigation li.level1 span").each( function () { 
       // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="#" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
	// On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
  
*/  
  $("ul.objectName li.level1 > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.objectName ul.objectDescription:visible").length != 0) { 
            $(this).next("ul.objectName ul.objectDescription").slideUp("normal", function () { $(this).parent().removeClass("open");$(this).parent().addClass("close") }); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $("ul.objectName ul.objectDescription").slideUp("normal", function () { $(this).parent().removeClass("open");$(this).parent().addClass("close") }); 
            $(this).next("ul.objectName ul.objectDescription").slideDown("normal", function () { $(this).parent().removeClass("close");$(this).parent().addClass("open") }); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    });
} ) ;

et mon de html / PHP est le suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?php
echo '<ul class="objectName"><li class="level1">';
echo '<a href="#">tt</a>';
 
echo '<table><tr><td>hh</td></tr></table>';
 
echo '<ul class="objectDescription close"><li>';
echo '<div>test</div>';
echo '</li></ul></li></ul>';
?>

Ce que je ne comprends pas pourqoi ca fonction quand je commente cette ligne

#echo '<table><tr><td>hh</td></tr></table>';

Si je la décommentre, le <ul class="objectDescription close"> ne se développe pas alors qu'il se développe normalement quand la ligne, ci-dessus , est commentée!!!

Avez vous une idée pourquoi le table a une infuance?
Ne serait-il pas un problème de DOM?

Merci

**sedryk** · 15/07/2010, 12h01

Hello pierrot10,

L'ajout d'élément après ton tag 'a', empêche une sélection correcte de <ul class="objectDescription close"> via la méthode next("...").

**pierrot10** · 15/07/2010, 13h33

ok , mais alors comment perfectionner ce code alors?

**sedryk** · 15/07/2010, 14h29

A mon avis la solution la plus simple consiste à utiliser nextAll() et en ne prenant que le premier.

next() retourne le tag frère (sibling) suivant respectant le sélecteur s'il est précisé. Dans ton cas, le tag frère suivant est le tag 'table' qui ne respecte pas le sélecteur?

nextAll() retourne tous les tag frère (sibling) suivant respectant le sélecteur s'il est précisé. Dans ton cas, on ne prendra que le premier de ces tags frères.

Voici ce que ça donne en reprennant ton code (au passage, je ne l'ai pas essayé !)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  $("ul.objectName li.level1 > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).nextAll("ul.objectName ul.objectDescription:visible").length != 0) { 
            $(this).nextAll("ul.objectName ul.objectDescription")[0].slideUp("normal", function () { $(this).parent().removeClass("open");$(this).parent().addClass("close") }); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $("ul.objectName ul.objectDescription").slideUp("normal", function () { $(this).parent().removeClass("open");$(this).parent().addClass("close") }); 
            $(this).nextAll("ul.objectName ul.objectDescription")[0].slideDown("normal", function () { $(this).parent().removeClass("close");$(this).parent().addClass("open") }); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    });

**pierrot10** · 15/07/2010, 15h28

Salut Sedryk,

Merci pour ta réponse. En fait ta solution est de remplacé tout les next() par nextAll().

Je l'ai fait mais ca n'a malheureusement pas résolu le problème. Ca ne change pas

**sedryk** · 15/07/2010, 17h19

Envoyé par pierrot10

En fait ta solution est de remplacé tout les next() par nextAll().

En oubliant pas de sélectionner uniquement le premier élément. Sinon peux-tu me fournir le code html que ton php génère ?

**pierrot10** · 15/07/2010, 21h50

Voilà le code exact:
Il diffpre a celui ci-dessus, car j'ai voulu donné la version simplifié, mais le problème est identique:

Code HTML :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<div class="objectName">
	<table class="cal">
		<tbody>
			<tr>
				<td class="cal-row-name object">
					<a href="index.php">Object No : 1</a>
				</td>
				<td class="days">1</td>
				<td class="days">2</td>
				<td class="days">3</td>
				/..
				28 autres cellules
				../
				<td class="days">31</td>
			</tr>
		</tbody>
	</table>
	<div class="objectDescription open">
		<div>test</div>
	</div>
</div>
<div class="objectName">
	<table class="cal">
		<tbody>
			<tr>
				<td class="cal-row-name object">
					<a href="index.php">Object No : 2</a>
				</td>
				<td class="days">1</td>
				<td class="days">2</td>
				<td class="days">3</td>
				/..
				28 autres cellules
				../
				<td class="days">31</td>
			</tr>
		</tbody>
	</table>
	<div class="objectDescription open">
		<div>test</div>
	</div>
</div>
<div class="objectName">
	<table class="cal">
		<tbody>
			<tr>
				<td class="cal-row-name object">
					<a href="index.php">Object No : 3</a>
				</td>
				<td class="days">1</td>
				<td class="days">2</td>
				<td class="days">3</td>
				/..
				28 autres cellules
				../
				<td class="days">31</td>
			</tr>
		</tbody>
	</table>
	<div class="objectDescription open">
		<div>test</div>
	</div>
</div>
5 ou 8 autres objectName

<div class="objectDescription open"> est la partie qui se cache ou qui s'ouvre quand on clique sur le lien "Object No x". Attention, quand je clique sur Object No 1, il doit que développé lqu'un "objectDescription". Celui qui se trouve dans la meme layer appelé "objectName".

Code js :

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
 
// JavaScript Document
 
$(document).ready( function () { 
 
    // On cache les sous-menus : 
    //$(".navigation ul.subNavigation").hide(); 
	// sauf celui qui porte la classe "open_at_load" : 
    $("div.objectName div.objectDescription:not('.open')").hide(); 
 
	// et on remplace l'élément span qu'ils contiennent par un lien : 
 
/*
	$(".navigation li.level1 span").each( function () { 
       // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="#" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
*/
 
// On modifie l'évènement "click" sur les liens dans les items de liste 
// qui portent la classe "toggleSubMenu" :   
  $("div.objectName table.cal tr td.cal-row-name > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).nextAll("div.objectName div.objectDescription:visible").length != 0) { 
            $(this).nextAll("div.objectName div.objectDescription").slideUp("normal", function () { $(this).parent().removeClass("open");$(this).parent().addClass("close") }); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $("div.objectName div.objectDescription").slideUp("normal", function () { $(this).parent().removeClass("open");$(this).parent().addClass("close") }); 
            $(this).nextAll("div.objectName div.objectDescription").slideDown("normal", function () { $(this).parent().removeClass("close");$(this).parent().addClass("open") }); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    });
} ) ;

**sedryk** · 16/07/2010, 10h40

Ca diffère quand même pas mal, ton lien est en faite dans le tableau. Comme je te l'ai précisé les fonctions next travaille avec les tags frères, c'est à dire avec les tags qui se trouve dans le même parent. Dans ton cas, ce n'est pas étonnant que ça ne fonctionne pas, ton tag 'a' est dans une td et n'a pas de frère donc next ou nextAll ne retourne rien d'où le faite que ton code ne fonctionne pas !

Je vais regarder d'un peu plus prêt !

**sedryk** · 16/07/2010, 10h54

Je suis parti du principe que la partie qui doit s'ouvrir et se fermer est celle contenue dans les div 'objectDescription'. Peux-tu tester le code 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
$("div.objectName table.cal tr td.cal-row-name > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        var sousMenu = $(this).closet("div.objectName");
        if (sousMenu.nextAll("div.objectDescription:visible").length != 0) {
        	sousMenu.nextAll("div.objectDescription").slideUp("normal", function () { $(this).removeClass("open");$(this).addClass("close") });
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $("div.objectName div.objectDescription").slideUp("normal", function () { $(this).removeClass("open");$(this).addClass("close") }); 
            sousMenu.nextAll("div.objectDescription").slideDown("normal", function () { $(this).removeClass("close");$(this).addClass("open") }); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    });

**pierrot10** · 16/07/2010, 16h28

Salur Sedryc,

Je te remcie pour ta réponse,
J'ai très trsè vite essayé car je suis sur le point de partir en vacances 1 semaine.
Ca pas l'air de marché,
Je pense qu'il y a un problème au niveau de

var sousMenu = $(this).closet("div.objectName");

(j'ai aussi eyssayé sans le t de closet)

et l'error console de Firefox me retourne que ce n'est pas une fonction

Error: $(this).closet is not a function
Source File: http://localhost/eBooking/js/jQuery/menu-accordeon2.js
Line: 46

En tout cas merci pour ton aide

**sedryk** · 16/07/2010, 16h41

une erreur de ma part il faut plutôt mettre closest et non closet

**Bovino** · 17/07/2010, 22h39

Envoyé par sedryk

une erreur de ma part il faut plutôt mettre closest et non closet

Oui, on est bien d'accord que l'erreur vient de toi qui crache du code et non pas de celui qui copie colle sans même regarder si une faute de frappe à pu se glisser alors qu'il a quand même réussi à isoler la ligne problématique, tu es vraiment impardonnable

Bref, c'était mon coup de gueule

Ajout de tableau et exécution

jQuery

Discussions similaires

Partager

Partager