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

jQuery Discussion :

jQuery-UI : Accordion et non reconnaissance de contenu


Sujet :

jQuery

  1. #1
    Membre confirmé
    Inscrit en
    Mai 2006
    Messages
    140
    Détails du profil
    Informations forums :
    Inscription : Mai 2006
    Messages : 140
    Par défaut jQuery-UI : Accordion et non reconnaissance de contenu
    Bonjour à tous,

    Ma question est probablement basique mais je m'arrache les cheveux dessus depuis deux jours.

    http://nicolashumblot.fr/img/Accueil.htm

    Tout d'abord, il s'agit d'un site réalisé sous Joomla (2.5.4) pour mon club. Je voudrais réaliser un menu en "accordéon" avec les trois composants de droite, comme celui-ci : http://jqueryui.com/demos/accordion/

    Je télécharge donc jQuery-UI et l'installe en lien dans ma page. Toutefois, si vous ouvrez la page de démo jQuery et que vous vous rendez sur les éléments en accordéon, vous pouvez voir que plusieurs classes sont attribuées aux éléments.

    Mon problème est que après avoir chargé jQuery-UI et activé le accordion sur mon id de div qui englobe tout, il ne rajoute pas toutes ces classes. Je n'ai qu'une classe "selected" sur mon titre h3 sélectionné, mais absolument rien d'autre.

    Du fait que toutes ces classes ne soient pas ajoutées, je ne peux pas masquer/démasquer les éléments puisque mon css ne peut pas savoir quand mon contenu doit être affiché ou non.

    Est-ce que quelqu'un pourrait me venir en aide ? Je lui en serai vraiment reconnaissant.

    Merci d'avance.

  2. #2
    Membre confirmé
    Inscrit en
    Mai 2006
    Messages
    140
    Détails du profil
    Informations forums :
    Inscription : Mai 2006
    Messages : 140
    Par défaut
    Bonjour,

    En m'inspirant d'un tutoriel trouvé sur un autre site, j'ai modifié mon code et je me suis rapproche du but.

    http://nicolashumblot.fr/img/Accueil.htm

    Toutefois, mon script semble ne pas fonctionner correctement. Lorsque je clique sur un élément, l'autre élément se masque bien, mais le nouveau ne "sort" pas. Du coup, je me retrouve avec tous mes éléments de fermés et aucun contenu visible.

    Je ne comprends pas très bien ce qui peut gêner. Au début, je pensais que c'était parce que dans le tutoriel la liste ul est dans l'élément de liste li, mais après coup, si l'élément n'a pas de mal à se fermer, pourquoi est-ce que ça coince quand il veut s'ouvrir ?

    Voici le nouveau code javascript :

    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
    <script type="text/javascript">
    $(document).ready( function () {
        // On cache les contenus :
        $("#contenu_mod_results").hide();
        $("#contenu_mod_table").hide();
     
     
        // On s�lectionne tous les items de liste portant la classe "toggleSubMenu"
        // et on remplace l'�l�ment span qu'ils contiennent par un lien :
        $(".toggleSubMenu span").each( function () {
            $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + $(this).text() + '<\/a>') ;
        } ) ; 					
     
     
        //
        //
        ////// A MODIFIER
        //
        //
     
        // On modifie l'�v�nement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("h3.toggleSubMenu > a").click( function () {
            // Si le sous-menu �tait d�j� ouvert, on le referme :
            if ($(this).next(".subMenu:visible").length != 0) {
                $(this).next(".subMenu").slideUp("normal");
            }
            // Si le sous-menu est cach�, on ferme les autres et on l'affiche :
            else {
                $(".subMenu").slideUp("normal");
                $(this).next("div.subMenu").slideDown("normal");
            }
            // On emp�che le navigateur de suivre le lien :
            return false;
        });    
    } ) ;
    </script>
    Voici le code html de ces éléments :

    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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    <div id="recap_equipe">
        <h3 id="titre_mod_nextMatches" class="toggleSubMenu"><a href="" title="Afficher le sous-menu">Prochain match</a></h3>
        <div id="contenu_mod_nextMatches" class="subMenu">
            <p class="noGamePlanned">Aucun match n'est programmé pour le moment.</p>
        </div>
        <h3 id="titre_mod_results" class="toggleSubMenu"><a href="" title="Afficher le sous-menu">Dernier match</a></h3>
        <div id="contenu_mod_results" class="subMenu" style="display: none; ">
            <div class="emblem_thome"><p><img src="Accueil_files/bl133647.jpg" width="148"></p></div>
            <div class="emblem_taway"><p><img src="Accueil_files/bl133648.jpg" width="148"></p></div>
            <div class="team_thome"><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=team&amp;tid=1&amp;sid=1&amp;Itemid=">Dijon</a>					</div>
            <div class="team_taway"><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=team&amp;tid=4&amp;sid=1&amp;Itemid=">Lons-le-Saunier</a>					</div>
            <div class="match_date">
                <p>25/03/2012 <br> 14:00</p>
            </div>	
            <div class="hometeam_score">
                <p><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=view_match&amp;id=56&amp;Itemid=">7</a></p>
            </div>
            <div class="awayteam_score">
                <p><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=view_match&amp;id=56&amp;Itemid=">5</a></p>
            </div>					
    </div>
     
        <h3 id="titre_mod_table" class="toggleSubMenu"><a href="" title="Afficher le sous-menu">Classement</a></h3>
        <div id="contenu_mod_table" class="subMenu" style="display: none; ">
            <h4 class="classement">Poule H</h4>
            <table width="100%" class="tblview">
                <tbody>
                    <tr>
                        <th width="20">№</th>
                        <th style="border-left:0px;"><div>Equipe</div></th>
                        <th>Joues</th>
                        <th>Points</th>
                    </tr>
                    <tr class="tblro1">
                        <td width="20">1</td>
                        <td width="80%" style="text-align:left;border-left:0px; padding:0px 10px;" nowrap="nowrap" class="blteamname"><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=team&amp;tid=5&amp;sid=1&amp;Itemid=101">Lyon</a></td>
                        <td>14</td>
                        <td>31</td>
                    </tr>
                    <tr class="tblro0">
    	            <td width="20">2</td>
    		    <td width="80%" style="text-align:left;border-left:0px; padding:0px 10px;" nowrap="nowrap" class="blteamname"><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=team&amp;tid=8&amp;sid=1&amp;Itemid=101">Mâcon</a></td>
                        <td>14</td>
                        <td>31</td>
                    </tr>
                    <tr class="tblro1">
    	            <td width="20">3</td>
                        <td width="80%" style="text-align:left;border-left:0px; padding:0px 10px;" nowrap="nowrap" class="blteamname"><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=team&amp;tid=4&amp;sid=1&amp;Itemid=101">Lons-le-Saunier</a></td>
    		    <td>14</td>
                        <td>30</td>
                    </tr>
                    <tr class="tblro0">
                        <td width="20">4</td>
                        <td width="80%" style="text-align:left;border-left:0px; padding:0px 10px;" nowrap="nowrap" class="blteamname"><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=team&amp;tid=7&amp;sid=1&amp;Itemid=101">Villard-Bonnot</a></td>
                        <td>14</td>
                        <td>28</td>
                    </tr>
                    <tr class="tblro1">
                        <td width="20">5</td>
                        <td width="80%" style="text-align:left;border-left:0px; padding:0px 10px;" nowrap="nowrap" class="blteamname"><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=team&amp;tid=1&amp;sid=1&amp;Itemid=101">Dijon</a></td>
                        <td>14</td>
                        <td>22</td>
                    </tr>
                    <tr class="tblro0">
                        <td width="20">6</td>
                        <td width="80%" style="text-align:left;border-left:0px; padding:0px 10px;" nowrap="nowrap" class="blteamname"><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=team&amp;tid=3&amp;sid=1&amp;Itemid=101">Chalon-sur-Saone</a></td>
                        <td>14</td>
                        <td>8</td>
                    </tr>
                    <tr class="tblro1">
                        <td width="20">7</td>
                        <td width="80%" style="text-align:left;border-left:0px; padding:0px 10px;" nowrap="nowrap" class="blteamname"><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=team&amp;tid=6&amp;sid=1&amp;Itemid=101">Pontarlier</a></td>
                        <td>14</td>
                        <td>7</td>
                    </tr>
                    <tr class="tblro0">
    	            <td width="20">8</td>
    		    <td width="80%" style="text-align:left;border-left:0px; padding:0px 10px;" nowrap="nowrap" class="blteamname"><a href="http://localhost/cardinauxdijon/index.php?option=com_joomsport&amp;task=team&amp;tid=2&amp;sid=1&amp;Itemid=101">Besançon</a></td>
                        <td>14</td>
                        <td>1</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    Si quelqu'un pouvait m'aider ce serait vraiment gentil.

    Merci d'avance.

Discussions similaires

  1. Pb de non-reconnaissance de la variable word.application
    Par Tintou dans le forum VBA Access
    Réponses: 2
    Dernier message: 30/04/2007, 15h34
  2. Non reconnaissance des modules Linguistiques
    Par Caromelice dans le forum Framework .NET
    Réponses: 3
    Dernier message: 12/12/2006, 10h45
  3. Polymorphisme : non-reconnaissance de méthode
    Par Chen norris dans le forum C++
    Réponses: 4
    Dernier message: 24/08/2006, 11h52
  4. CITRIX sous WINNT: non reconnaissance d'un driver
    Par Asdorve dans le forum Windows Serveur
    Réponses: 10
    Dernier message: 04/07/2006, 11h36
  5. Non reconnaissance d'une variable
    Par dubitoph dans le forum Langage
    Réponses: 4
    Dernier message: 25/04/2006, 11h21

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