11548 sujets

JavaScript, DOM et API Web HTML5

Adaptation tutoriel menu déroulant

Bonjour à tous,

Je réalise un site pour mon association de roller hockey et je voudrais réaliser un effet accordéon pour mon site. La différence est qu'il ne s'agit pas là de menus mais d'éléments de contenu div.

Je me suis inspiré du tutoriel sur ce site (http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html) que j'ai modifié pour l'adapter, tout fonctionne bien pour replier les éléments, mais pas pour les déplier. Smiley decu

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

Voici le code html utile :

<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">&#8470;</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>


Et voici le Javascript modifié :

<script type="text/javascript">
$(document).ready( function () {
    // On cache les contenus :
    $("#contenu_mod_results").hide();
    $("#contenu_mod_table").hide();
					
					
    // On s&#65533;lectionne tous les items de liste portant la classe "toggleSubMenu"
    // et on remplace l'&#65533;l&#65533;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'&#65533;v&#65533;nement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $("h3.toggleSubMenu > a").click( function () {
        // Si le sous-menu &#65533;tait d&#65533;j&#65533; ouvert, on le referme :
        if ($(this).next(".subMenu:visible").length != 0) {
            $(this).next(".subMenu").slideUp("normal");
        }
        // Si le sous-menu est cach&#65533;, on ferme les autres et on l'affiche :
        else {
            $(".subMenu").slideUp("normal");
            $(this).next("div.subMenu").slideDown("normal");
        }
        // On emp&#65533;che le navigateur de suivre le lien :
        return false;
    });    
} ) ;
</script>


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 ? Ça défie ma logique. Smiley biggol

Si quelqu'un pouvait m'indiquer ce qui cloche, je lui en serait vraiment reconnaissant. Je ne connait pas très bien jQuery, je suis débutant et découvre un peu. Donc si ça se trouve c'est une erreur stupide et je m'en excuse...

Merci d'avance pour votre aide. Smiley biggrin
Modifié par Twitt (23 May 2012 - 12:39)
Merci pour la réponse rapide.

J'avais essayé avec le jQuery-ui il y a de ça deux semaines. Mais ça ne fonctionnait pas non plus. Il activait une classe "selected" sur mon élément h3, et c'était tout, il ne faisait absolument rien d'autre, alors que la démo a beaucoup plus de classes qui apparaissent et disparaissent. Smiley decu

Est-ce que tu sais d'où ça pouvait venir ?

J'avais écrit un sujet d'aide sur developpez.com et je n'ai jamais eu de réponse, donc je me suis tourné vers le tuto de alsacréations. (Malheureusement, il n'est plus possible de voir le code tel qu'il était puisque je l'ai écrasé lorsque j'ai ouvert ce sujet-ci pour le mettre à jour. Smiley confus )
Sujet clos
Aller à