11548 sujets

JavaScript, DOM et API Web HTML5

Menu accordéon : pré-ouvrir

Salut à tous,

J'ai suivi le tutorial pour réaliser un menu tutoriel avec Jquery.
Cependant, j'ai une question : comment faire pour qu'une des rubrique s'ouvre automatiquement au chargement de la page?

Merci d'avance
Ant
Remplacer :
$(".navigation ul.subMenu").hide();

par
$(".navigation ul.subMenu").not(":first").hide();

ça devrait a priori afficher le premier menu et cacher les autres.
Salut,

Désolé mais ça ne marche pas.

Mon code JS :

$(document).ready( function () {
 
$(".navigation ul.subMenu").not(":first").hide();

    $(".navigation li.toggleSubMenu span").each( function () {

        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;


    $(".navigation li.toggleSubMenu > a").click( function () {
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal");
}
        else {
            $(".navigation ul.subMenu").slideUp("normal");
            $(this).next("ul.subMenu").slideDown("normal");
        }

        return false;
    });    


} ) ;


Est-ce que je dois changer quelque chose niveau Xhtml ou CSS?

@+
Bonsoir Ant,

Sans garantie mais je suis joueur... Smiley lol 


$("ul.subMenu:not(:eq(2))").hide();

La numérotation commençant à zéro si je ne m'abuse, ce code devrait donc laisser ouvert le troisième sous-menu...

Quelques modif dans le code html de Thomas mais rien de grave Smiley lol 

<ul id="navigation">
    <li class="toggleSubMenu"><a href="" title="Afficher le sous-menu">Item 1</a>
        <ul class="subMenu">
            <li><a href="" title="">Item 1.1</a></li>
            <li><a href="" title="">Item 1.2</a></li>
        </ul>
    </li>
    <li class="toggleSubMenu"><a href="" title="Afficher le sous-menu">Item 2</a>
        <ul class="subMenu">
            <li><a href="" title="">Item 2.1</a></li>
            <li><a href="" title="">Item 2.2</a></li>
            <li><a href="" title="">Item 2.3</a></li>
        </ul>
    </li>
    <li class="toggleSubMenu"><a href="" title="Afficher le sous-menu">Item 3</a>
        <ul class="subMenu">
            <li><a href="" title="">Item 3.1</a></li>
            <li><a href="" title="">Item 3.2</a></li>
        </ul>
    </li>
    <li class="toggleSubMenu"><a href="" title="Afficher le sous-menu">Item 4</a>
        <ul class="subMenu">
            <li><a href="" title="">Item 4.1</a></li>
            <li><a href="" title="">Item 4.2</a></li>
            <li><a href="" title="">Item 4.3</a></li>
            <li><a href="" title="">Item 4.4</a></li>
        </ul>
    </li>
</ul>


A priori cela fonctionne...de là à dire que c'est valide, fait dans les règles de l'art.... Smiley sweatdrop
Modifié par 6l20 (11 Oct 2008 - 17:40)
Salut,

Pas de résultat. Smiley ohwell

Mon code JS :

$(document).ready( function () {
 

$(".navigation ul.subMenu:not(:eq(2))").hide();


    $(".navigation li.toggleSubMenu span").each( function () {

        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;


    $(".navigation li.toggleSubMenu > a").click( function () {
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal");
}
        else {
            $(".navigation ul.subMenu").slideUp("normal");
            $(this).next("ul.subMenu").slideDown("normal");
        }

        return false;
    });    


} ) ;


Mon code XHTML :
<div id="navigation">


            <div class="bloc">
			
			
       	 	<h1 class="ascenseur">Gagner</h1>

			<div>
            <ul class="first">
            	<li><a href="surf2.php">Clics rémunérés du jour</a></li>
                <li><a href="inscriptions1.php">Inscriptions rémunérées  </a></li>
         
            </ul>
			</div>
			
					

	

       	 	<h1 class="ascenseur">Filleuls</h1>
            <div>
			  <ul>
	         <li><a href="parrainage2.php">Liens de parrainage </a></li>
			 <li><a href="referals.php">Statistiques de vos filleuls </a></li>
			 <li><a href="purchase.php">Acheter des filleuls </a></li>
			 </ul>
			</div>
            
     
			
			
	
		<h1 class="ascenseur">Vos gains</h1>
			<div>
            <ul>
            	<li><a href="convert.php">Convertir votre argent </a></li>

                <li><a href="history.php">Historique de vos paiements</a></li>
           
            </ul>
			</div>
          
       

		
       	 	<h1 class="ascenseur" style="border-bottom: 1px solid #8fb9d0;">Divers</h1>
			<div>
            <ul style="border-top: 0px;">
            	<li><a href="profile.php">Votre profil </a></li>

                <li><a href="advertise.php">Annoncer </a></li>
                <li><a href="forums">Forums</a></li>
				<li><a href="contact.php">Contact </a></li>
				<li>	<a href="logout.php">Déconnexion  </a></li>
            </ul>
			
			</div>
            </div>
			  <div class="finbloc"></div>

          
      
</div>

</div>


Je remercie d'avance ceux qui prendront le temps d'y jeter un coup d'oeil.
S'il le faut, je veux bien donner quelques euros Paypal à celui qui me trouvera la solution Smiley langue lol

Bon fin de vendredi
@+
Bonjour les gens,

Dites, c'est cool de tenter tout ça, c'est pas comme si le tutoriel sur le menu accordéon prévoyait justement cette fonctionnalité. Il suffirait de le lire...
En fait, c'est bien pire que ça. Je me suis trompé de codes... C'est pas les bons et la référence du tutorial non plus.

<div id="navigation">





            <div class="bloc">

			

			

       	 	<h1 class="ascenseur">Gagner</h1>



			<div>

            <ul class="first">

            	<li><a href="surf2.php">Clics rémunérés du jour</a></li>

                <li><a href="inscriptions1.php">Inscriptions rémunérées  </a></li>

         

            </ul>

			</div>

			

					



	



       	 	<h1 class="ascenseur">Filleuls</h1>

            <div>

			  <ul>

	         <li><a href="parrainage2.php">Liens de parrainage </a></li>

			 <li><a href="referals.php">Statistiques de vos filleuls </a></li>

			 <li><a href="purchase.php">Acheter des filleuls </a></li>

			 </ul>

			</div>

            

     

			

			

	

		<h1 class="ascenseur">Vos gains</h1>

			<div>

            <ul>

            	<li><a href="convert.php">Convertir votre argent </a></li>



                <li><a href="history.php">Historique de vos paiements</a></li>

           

            </ul>

			</div>

          

       



		

       	 	<h1 class="ascenseur" style="border-bottom: 1px solid #8fb9d0;">Divers</h1>

			<div>

            <ul style="border-top: 0px;">

            	<li><a href="profile.php">Votre profil </a></li>



                <li><a href="advertise.php">Annoncer </a></li>

                <li><a href="forums">Forums</a></li>

				<li><a href="contact.php">Contact </a></li>

				<li>	<a href="logout.php">Déconnexion  </a></li>

            </ul>

			

			</div>

            </div>

			  <div class="finbloc"></div>



          

      

</div>



</div>


Le JS :
http://loveptc.com/js/ascenseur.js

Et ça provient d'un autre site que Alsacreations en fait.
Désolé..

Je rappelle la question qui était : comment faire pour ouvrir un des menus par défaut?

Merci.
Florent V. a écrit :
Bonjour les gens,
Dites, c'est cool de tenter tout ça, c'est pas comme si le tutoriel sur le menu accordéon prévoyait justement cette fonctionnalité. Il suffirait de le lire...

Pfff rabat-joie Smiley langue

J'ai évidemment lu avec attention le tutoriel de Thomas Smiley murf
Ceci étant dit, il me semble que cette méthode d'exclusion proposée en natif dans jquery ( ...:not(:eq(X)) ) a l'avantage de ne pas nous obliger à intervenir directement sur le code html (sans rajouter open_at_load donc) mais je peux me tromper...
Je revendique cependant le droit de "tenter" ! Smiley cligne (avec vérifications préalables il va sans doute mieux en le précisant...)

@Ant : Il faut diminuer les doses de ce que tu prends, c'est beaucoup trop fort ! Smiley lol
Conseil en passant : utilises le menu de Thomas Smiley cligne

Cdt,
Sylvain
Modifié par 6l20 (18 Oct 2008 - 20:45)
Sujet clos
Aller à