IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Treeview Javascript PHP / Affichage par défault


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 44
    Points : 20
    Points
    20
    Par défaut Treeview Javascript PHP / Affichage par défault
    Bonjour,

    J'ai un treeview avec des menus cachés qui marche très bien.

    Le problème est que quand j'arrive sur la page tout le menu est déployé alors que je souhaiterais ne voir que le 1er niveau par défault.
    Une idée?

    Merci,

    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
    40
    41
    42
    43
     
    function afficher_menu($parent, $niveau, $array) {
        $i=0;
        $html = "";
        $niveau_precedent = 0;
     
        if ($niveau%2 == 0) 
            $fa = "fa fa-caret-right";
        else
            $fa = "fa fa-long-arrow-right";
     
        // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
     
        if (!$niveau && !$niveau_precedent) $html .= "\n<ul>\n";
        foreach ($array as $noeud) {
            $idMenu = $noeud['id'];
            if ($parent == $noeud['idParent']) {
                if ($niveau_precedent < $niveau) $html .= "\n<ul style=\"display:block;\">\n";
                $html .= "<li>\n"
                . "<a onclick=\"javascript: showMenu(document.getElementById('menu$i'));\" style=\"cursor:pointer;\"><span class=\"$fa\"></span>" 
                . " " . $noeud['libelle'] 
                . " " . $noeud['id'] 
                . "-" . $noeud['idParent'] . "</a>";
                 $niveau_precedent = $niveau;
                $html .= "<span id=\"menu$i\">" . afficher_menu($noeud['id'], ($niveau + 1), $array) . "</span>";
            }
            $i++;
        }
     
        if (($niveau_precedent == $niveau) && ($niveau_precedent != 0)) $html .= "</ul>\n</li>\n";
        else if ($niveau_precedent == $niveau) $html .= "</ul>\n";
        else $html .= "</li>\n";
     
        return $html;
    }
    ?>
     
    <script type="text/javascript">
        function showMenu(menu) {
            if (menu.style.display == 'none') menu.style.display = 'block';
            else menu.style.display = 'none';
        }
    </script>

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    S'il n'y a rien d'autre dans ta page que le code que tu as donné, c'est normal car il n'y rien qui agit au chargement de la page pour replier le menu.

    Je m'étonne que PHP ne te dise rien à propos de la variable $niveau_precedent. As-tu activé l'affichage de tous les messages d'erreur ? Si non, ajoute error_reporting(-1); au début de ton script PHP.

    D'autre part, peux-tu nous montrer un exemple de code HTML généré par ce script en faisant Ctrl+U dans ton navigateur ?

    Astuce : tu n'es pas obligé de formater ton code HTML avec des "\n" partout qui, à mon avis, rendent le code PHP plus difficile à lire. Utilise l'inspecteur de ton navigateur, dans le menu outils de développement.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 44
    Points : 20
    Points
    20
    Par défaut
    Merci de m'avoir répondu,

    J'ai activé tous les messages d'erreur et PHP ne m'indique rien sur $niveau_precedent.
    Je n'ai pas mis de code pour cacher certaines erreurs ... Bizarre!
    Qu'est que je devrais avoir comme erreur?

    Je ne peux pas te montrer le code HTML généré car c'est une appli pour mon travail et je n'ai pas pensé à prendre le code source en rentrant ...

    Pour l'instant mon treeview fonctionne très bien, quand je clique sur un menu alors le sous-menu se replie ou se déplie, ...
    Le problème c'est que quand tu arrives sur la page, toute l'arborescence est dépliée (9niveaux).
    Et je souhaiterais voir seulement le premier niveau en arrivant sur la page ...

    J'ai essayé de mettre un onload() mais ça ne marche pas ...
    Et j'avoue que Javascript ce n'est pas ma tasse de thé!

    As-tu une idée pour replier le menu au chargement de la page?

    Merci,

  4. #4
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Non en fait c'est normal qu'il ne dise rien, c'est moi qui déconne Je croyais que c'était une globale.

    Pour ton problème je dirais qu'il suffit de mettre le style display: none à toutes les <ul> de second niveau. Grossièrement en JavaScript moderne (garanti non compatible IE6 ), on s'en sort avec un querySelectorAll et un petit forEach et ça donne quelque chose comme ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    Array.prototype.forEach.call(
      document.querySelectorAll("ul ul"),
      function ($ul) {
        $ul.style.display = "none";
      }
    );
    Le tout dans une fonction onload, bien sûr. (Ou mieux, sur l'évènement DOMContentLoaded.)

    C'est brutal, ça court-circuite les conventions de ta couche métier (s'il y en a), mais tu vois l'idée
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  5. #5
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 44
    Points : 20
    Points
    20
    Par défaut
    Oui j'ai des couches métier ... mais quand tu dis ça court-circuite les conventions des couches métier, quel est l'impact sur mon application? (temps de chargement, faille de sécurité, ...)

    Pour le code Javascript, faut-il importer la librairie Prototype?
    Et par exemple si je ne veux afficher que les 2 premiers niveaux au chargement de la page, est-ce correct de mettre en paramètre querySelectorAll("ul ul ul")?

  6. #6
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Citation Envoyé par arlemcities Voir le message
    Oui j'ai des couches métier ... mais quand tu dis ça court-circuite les conventions des couches métier, quel est l'impact sur mon application? (temps de chargement, faille de sécurité, ...)
    Ça rend juste le code incohérent et plus difficile à maintenir. Pour donner un exemple concret, si tu as donné une classe CSS aux menus repliés, il vaut mieux leur ajouter cette classe plutôt que leur mettre directement un display: none, pour rester dans les conventions qui ont été décidées. De la même manière; si une fonction JavaScript est prévue pour replier les menus (comme ta fonction showMenu – qui devrait peut-être plutôt s'appeler toggleMenu), il vaut mieux appeler cette fonction plutôt que réécrire du code équivalent. Tout ça dans un souci de factoriser le code, c'est-à-dire ne pas coder plusieurs fois la même chose. C'est le principe DRY.

    Bien entendu s'il y a de la redondance dans ton code, ça augmente la probabilité d'écrire des bugs, et donc ça peut impacter tout un tas de trucs dont le temps de chargement, la sécurité, etc. En fait, ce que je voulais dire par « ça court-circuite les conventions de ta couche métier », c'est qu'il faudra sans doute que tu adaptes le code que je t'ai donné pour qu'il s'intègre proprement dans le projet.

    Citation Envoyé par arlemcities Voir le message
    Pour le code Javascript, faut-il importer la librairie Prototype?
    Non. JavaScript est un langage à prototypes, ça veut dire que ses objets sont basés sur un prototype et non pas sur une classe. Le framework Prototype a juste repris le nom, mais utiliser un prototype en JS ne signifie pas qu'on a besoin de la bibliothèque Prototype.

    Note, quand j'interviens sur un forum JS, je m'efforce de toujours donner du code vanilla, c'est-à-dire sans recourir à un framework (sauf mention contraire). En revanche, j'aime utiliser des fonctionnalités récentes de JavaScript, qui sont normalement présentes dans les versions actuelles de tous les navigateurs ou presque.

    Dans le code que j'ai donné, j'utilise le prototype de Array car je veux utiliser la méthode forEach, et la collection renvoyée par querySelectorAll n'a pas de méthode forEach. Le vrai « truc » dans mon code ce n'est pas le prototype mais la méthode call.

    Pour commencer il faut comprendre le fonctionnement de forEach. Je t'ai donné un lien vers le MDN dans mon message précédent. En gros c'est une sorte de boucle for « version fonction ». J'aurais pu utiliser effectivement une boucle for, mais ça aurait été moins drôle

    Le problème est que :
    1o forEach est une méthode de tableau (objets construits par Array)
    2o querySelectorAll renvoie des collections qui ressemblent à des tableaux, mais ne sont pas des tableaux. (techniquement, leur constructeur n'est pas Array mais NodeList).

    Je me rends compte que je suis en train de redire ce que j'ai écrit sur mon blog, donc sans vouloir faire de l'auto-promotion, je t'invite à lire mon article

    Citation Envoyé par arlemcities Voir le message
    Et par exemple si je ne veux afficher que les 2 premiers niveaux au chargement de la page, est-ce correct de mettre en paramètre querySelectorAll("ul ul ul")?
    Ouaip ! Encore une fois, les outils de développement de ton navigateur peuvent t'aider à écrire le bon sélécteur. Dans la console, tape querySelectorAll("ul ul ul"), valide avec Entrée, et tu auras une collection des éléments correspondants, qui normalement se mettent en surbrillance quand tu survoles la collection.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  7. #7
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 44
    Points : 20
    Points
    20
    Par défaut
    Bonjour,

    J'ai essayé d'apater ton code Javascript mais sans succès ...

    Fonction pour replier/déplier le menu:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    function toggleMenu(menu) {
        if (menu.style.display == 'none') menu.style.display = 'block';
        else menu.style.display = 'none';
    }
    Fonction pour refermer le menu au chargement de la page:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <script type="text/javascript">
    function loadMenu() {
        Array.prototype.forEach.call(document.querySelectorAll("ul ul"),
            function ($ul) {
                $ul.style.display = "none";
            }
        );
    }        
    </script>
    J'ai mis onload="loadMenu()" sur le body!

    Donc au chargement de la page, j'ai bien le menu de replié mais lorsque je clique dessus mon menu ne se déplie pas!

    Merci de ton aide,

  8. #8
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 44
    Points : 20
    Points
    20
    Par défaut
    Edit:
    Quand je clique sur les niveaux précédents, le toggle marche bien.
    Par contre lorsque je clique sur le dernier niveau d'affiché, les niveaux suivants ne se déplient pas! (jai bien vérifié qu'il y avait d'autre niveaux dans la Bdd)

  9. #9
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Salut !
    En analysant plus en détail ton code, je me suis rendu compte que tu appelais toggleMenu sur des <span> et non pas sur des <ul>. Je t'ai donc induit en erreur, désolé.

    Le sélecteur correct serait donc "li > span". Si ça rentre en conflit avec d'autres <span> présents, tu peux rajouer un sélecteur d'attribut pour vérifier le début de l'id : "li > span[id^='menu']".

    Ça donnerait ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function loadMenu() {
        Array.prototype.forEach.call(document.querySelectorAll("li > span"),
            function ($span) {
                $span.style.display = "none";
            }
        );
    }
    Pour la science je te donne la version sans forEach, avec une boucle for classique :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    function loadMenu() {
        var spanList = document.querySelectorAll("li > span");
        for (var i = 0, $span; $span = spanList[i]; i++) {
            $span.style.display = "none";
        }
    }
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  10. #10
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 44
    Points : 20
    Points
    20
    Par défaut
    Merci pour ton aide! Ca marche parfaitement!

  11. #11
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 44
    Points : 20
    Points
    20
    Par défaut
    Bonjour,

    J'aurais besoin encore d'un peu d'aide si possible ...

    Comme tu as pu le voir dans mon premier code, j'utilise une variable $fa qui renvoie des icônes bootstrap selon le niveau dans lequel tu te trouves.
    Comme tout menu qui se respecte, je cherche à afficher la même variable $fa mais avec des icônes différentes lorsque le menu est déroulé.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    if (menu.style.display == 'none'){
            menu.style.display = 'block';
            document.getElementById('plus').style.display = 'block';
            document.getElementById('moins').style.display = 'none';
        }
        else{
            menu.style.display = 'none';
            document.getElementById('plus').style.display = 'none';
            document.getElementById('moins').style.display = 'block';
        }
    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
     
    $(document).ready(function () {
     
        $('#toggle-view li').click(function () {
     
            var text = $(this).children('div.panel');
     
            if (text.is(':hidden')) {
                text.slideDown('200');
                $(this).children('span').html('-');        
            } else {
                text.slideUp('200');
                $(this).children('span').html('+');        
            }
     
        });
     
    });
    Voici les 2 codes Javascript que j'ai essqyé mais sans succès!

    Peux-tu me donner une piste?

    Merci beaucoup,

  12. #12
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Bonjour,
    quelques messages plus haut je t'avais demandé de me montrer le code HTML généré. Peux-tu me le donner ?

    Si j'en crois ton code PHP, tu as des <span class="fa fa-...">, tu devrais donc être en mesure de les sélectionner avec span.fa. C'est déjà un début d'information. Tape document.querySelectorAll("span.fa") dans ta console et vois si ça peut t'aider à quelque chose.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  13. #13
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 44
    Points : 20
    Points
    20
    Par défaut
    Bonjour,

    Voici ce que me renvoie le navigateur:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <a onclick='javascript: if(1>0) toggleMenu(document.getElementById("menu6"));' style='cursor:pointer;'><span class="fa fa-cog"></span> aaa 3230-1</a><span id="menu6"><ul><li><button type='button' class='btn btn-primary btn-xs'>Options</button>
                 <a onclick='javascript: if(2>0) toggleMenu(document.getElementById("menu106"));' style='cursor:pointer;'><span class="fa fa-wrench"></span> aaa 3231-3230</a><span id="menu106"></li></span><li><button type='button' class='btn btn-primary btn-xs'>Options</button>
                 <a onclick='javascript: if(2>0) toggleMenu(document.getElementById("menu107"));' style='cursor:pointer;'><span class="fa fa-wrench"></span> bbb 3232-3230</a><span id="menu107"></li></span><li><button type='button' class='btn btn-primary btn-xs'>Options</button>
                 <a onclick='javascript: if(2>0) toggleMenu(document.getElementById("menu108"));' style='cursor:pointer;'><span class="fa fa-wrench"></span> ccc 3233-3230</a><span id="menu108"></li></span></ul></li></span></ul></li></span></ul>
    Mon idée était de faire un switch sur la variable $fa en jouant sur le display:none/block de la balise <ul> ... Qu'en penses-tu?

    Merci,

  14. #14
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Tu sais que JS ne voit pas les variables PHP n'est-ce pas ?

    Jouer directement sur le display block/none, ce n'est pas cohérent, encore une fois, avec les conventions que tu t'es fixées. C'est justement ta fonction toggleMenu qui gère le display de la liste, pourquoi n'agirait-elle pas en même temps sur le span ?

    Au fait, que donne le querySelectorAll que je t'ai demandé de regarder dans mon précédent message ?

    Normalement tu dois pouvoir accéder au <span class="fa ..."> à partir du <span id="menuXXX">, en utilisant des propriétés de navigation dans le DOM telles que previousSibling ou previousElementSibling.

    Quelques points à améliorer dans ton code :
    • javascript: est inutile dans un onclick
    • les if (1>0) et if (2>0) sont inutiles car leur condition est toujours vraie, tu peux les retirer
    • tu peux aussi retirer type='button' sur les balises <button>
    • les liens sans href n'ont pas de sémantique ; c'est pour ça que le curseur ne change pas avec eux, et que tu as été obligé de rajouter style='cursor:pointer'. Tu as deux solutions :
      • soit tu rajoutes href="#" sur le lien ainsi que return false à la fin du onclick
      • soit tu ajoutes le style dans une feuille pour éviter de le répéter à chaque fois :
        Code css : Sélectionner tout - Visualiser dans une fenêtre à part
        a[onclick] { cursor: pointer; }
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  15. #15
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 44
    Points : 20
    Points
    20
    Par défaut
    Merci pour l'amélioration syntaxique de mon code!

    Lorsque je tape document.querySelectorAll("span.fa") dans la console, il me renvoie un tableau vide []!?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    function toggleMenu(menu) {
        if (menu.style.display == 'none') {
            menu.style.display = 'block';
            Array.prototype.forEach.call(
                document.querySelectorAll("span.fa"),
                function ($span) {$span.style.display = "none";}
            ); 
        } else 
            menu.style.display = 'none';  
    }
    Quand j'essaie ce code, tous mes span.fa disparaisse au clic. C'est normal avec le display:none mais je ne vois toujours pas comment changer le sens de la flèche (en sachant que chaque niveau a une flèche différente)!?

    Javascript ce n'est vraiment pas mon truc!!! Malheureusement ...

  16. #16
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Citation Envoyé par arlemcities Voir le message
    Lorsque je tape document.querySelectorAll("span.fa") dans la console, il me renvoie un tableau vide []!?
    Ça c'est pas normal. Tu utilises une <iframe> ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  17. #17
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 44
    Points : 20
    Points
    20
    Par défaut
    Non pas du tout.

  18. #18
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2015
    Messages : 44
    Points : 20
    Points
    20
    Par défaut
    J'ai essayé ça mais toujours pas de résultat:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    function toggleIcon(menu) {
        if (menu.style.display == 'none') icon.html('<span class="glyphicon glyphicon-plus"></span>');
        else icon.html('<span class="glyphicon glyphicon-minus"></span>');  
    }
    Peux-tu encore m'aider?

    Merci,

  19. #19
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    icon.html('<span class="glyphicon glyphicon-plus"></span>')
    tu sorts d'où cette syntaxe (jquery peut être) ?

  20. #20
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Salut,

    tu dis pas de résultat, mais as-tu un message dans la console ? Parce que je ne vois pas où la variable icon est définie.

    Je vois que tu as retiré les classes fa. L'as-tu fait avant de tester document.querySelectorAll("span.fa") dans ta console ? Ça expliquerait pourquoi ça n’a pas marché.

    Je vois aussi que tu utilises jQuery. Je ne m'en étais pas rendu compte avant, excuse-moi. Je t'aurais fourni du code plus adapté.

    Mais avant tout, il faut que tu revoies le PHP qui génère tes listes, car il y a des balises qui ne sont pas dans le bon ordre. Tu peux utiliser le validateur pour t'aider, ou simplement regarder le code source (Ctrl+U) et chercher les endroits où il y a du rouge.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. Réponses: 3
    Dernier message: 15/08/2007, 10h04
  2. [Javascript/PHP] Affichage par onglets
    Par Sayrus dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 03/05/2007, 09h39
  3. [PHP-JS] Affichage par une fonction js
    Par Mathieu72 dans le forum Langage
    Réponses: 6
    Dernier message: 20/01/2007, 17h50
  4. Affichage par total de vote (php et/ou sql)
    Par bigbib dans le forum Langage SQL
    Réponses: 4
    Dernier message: 19/12/2006, 06h28
  5. VBA affichage par défault formulaire unique
    Par hocine dans le forum Access
    Réponses: 3
    Dernier message: 04/01/2006, 12h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo