Probleme menu deroulant jquery

Par raficraft, il y a 13 ans

Javascript

Salut à tous, je débute en jquery et je viens de suivre le tuto pour faire un menu vertical déroulant en jquery.
Le problème c'est que lorsque je clique sur un lien de mon menu la page ce reload est mes menu sont de nouveau
replier sur eux même. Alors que je souhaiterais que le module ouvert le reste.

<h1 class="switch">Configuration</h1>
<div>
<ul>
    <li><a href="<?php echo ADMIN?>config/sites/tables/index">Sites</a></li>
    <li><a href="<?php echo ADMIN?>config/modules/tables/index">Modules</a></li>
    <li><a href="<?php echo ADMIN?>config/design/install/index">Design</a></li>                                        
    <li><a href="<?php echo ADMIN?>config/color/tables/index">Couleur</a></li>                                       
    <li><a href="<?php echo ADMIN?>config/ossature/header/index">Header</a></li>
</ul>
</div>

<h1 class="switch">Categories</h1>
<div>
    <ul>
      <li><a href="<?php echo ADMIN?>structure/categories/tables/index">Categories</a></li>
      <li><a href="<?php echo ADMIN?>structure/s_categories/tables/index">Sous_categories</a></li>
      <li><a href="<?php echo ADMIN?>structure/categories/img/index">Images des categories</a></li>
</ul>
</div>

Puis le jquery 

<script type="text/javascript">
    /*Durée en ms default 500ms */
    jQuery().ready(function(){ 

        $(".switch").next("div").hide();
        $(".switch").click(function(){

                   if($(this).next("div").is(":hidden")){

                        $(".switch").next("div:visible").slideUp();

                         $(this).next ("div").slideDown(); 
                }            
        });      
    });

</script>

Donc lorsque l'on Click sur l’élément "H1", la div suivante ce déroule.
Mais lorsque l'on click sur un "LI" la page ce reload et les menu ce remettent en position "hide".
Comment faire apparaître sont élément "DIV" parent ?

La seule solution que je vois est de faire passer une valeur GET au lien pour ensuite placer mes conditions dans le script.
Mais bon je trouve pas cela bien ergonomique pour l'entretien du code. Suffit que je rajoute des sections et je devrait écrire des conditions supplémentaire.

De plus j'ai vu dans les thèmes

Texte du lien

Que cela à l'air faisable en passant la classe de la section ouvert en current hover
Et la class du lien en current . Donc ça! En cherchant je trouverais comment changer les classes.

Mais quid du reload de la page?

Jquery c'est bien ne pas le comprendre ça craint. ;) ;)

Merci par avance .

1 réponse

raficraft, il y a 13 ans 
<script type="text/javascript">
    /*Durée en ms default 500ms */
    jQuery().ready(function(){                    
        $(".switch").next("div").hide();
        $(".switch").click(function(){
                   if($(this).next("div").is(":hidden")){
                        $(".switch").next("div:visible").slideUp();
                         $(this).next ("div").slideDown(); 
                }
});     
});
<?php if (isset ($slug) && $slug == 'config'){?>
             $(document).ready(function() {
                $("#config").next("div").show();            

            });
        <?php
}elseif (isset ($slug) && $slug == 'cat'){
        ?>
             $(document).ready(function() {
                $("#cat").next("div").show();            

            });
        <?php } ?>               
</script> 

 <h1 id="config" class="switch">Configuration</h1>
<div>
  <ul>
      <li><a href="<?php echo ADMIN?>config/sites/tables/index?slug=config">Sites</a></li>
      <li><a href="<?php echo ADMIN?>config/modules/tables/index?slug=config">Modules</a></li>
  </ul>
</div>

<h1 id="cat" class="switch">Categories</h1>
<div>
   <ul>
     <li><a href="<?php echo ADMIN?>structure/categories/tables/index?slug=cat">Categories</a></li>
     <li><a href="<?php echo ADMIN?>structure/s_categories/tables/index?slug=cat">Sous_categories</a></li>
     <li><a href="<?php echo ADMIN?>structure/categories/img/index?slug=cat">Images des categories</a></li>
</ul>
</div>

Donc voilà ce que j'ai réussit à trouver en passant dans le get l'id du h1 de la balise div à ouvrir.
Ça fonctionne mais la méthode me plait pas. Cela vas faire autant de conditions que de catégories principal.
J'imagine même pas, ce que ce serait si je voulais styliser le lien précédemment clicker.

Il doit bien y avoir une autre méthode?