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