Discussion :

[bast292]

Bonjour à tous,

j'ai récupérer un menu accordéon jquery que j'ai mis en place sur mon site. Mon problème est que j'aimerai, lors d'un changement de page, que le menu garde l'aspect qu'il avait avant ce changement ( qu'il reste déplier dans la position avant le changement de page). J'ai bien du mal à trouver une solution.

Voici mon menu en html :

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
<ul class="container">
      <li class="menu">
 
          <ul>
		    <li class="button"><a href="#" class="green"> </a></li>
			<li class="dropdown">
                <ul>
                   <li><a href="?p=page1.php">Retour accueil</a></li>
				</ul>
			</li>
 
          </ul>
 
      </li>
 
      <li class="menu">
 
          <ul>
		    <li class="button"><a href="#" class="orange"></a></li>          	
 
            <li class="dropdown">
                <ul>
                   <li><a href="?p=page6.php">page6</a></li>
                   <li><a href="?p=page7.php">page7</a></li>              
	           <li><a href="?p=page8.php">page8</a></li>		
                </ul>
			</li>
 
          </ul>
 
      </li>
 
 
      <li class="menu">
 
          <ul>
		    <li class="button"><a href="#" class="blue"> </a></li>
 
            <li class="dropdown">
                <ul>
                    <li><a href="?p=page10.php">Page10</a></li>
                    <li><a href="?p=page11.php">Page11</a></li>
                    <li><a href="?p=page12.php">Page12</a></li>        
                </ul>
			</li>
 
          </ul>
 
      </li>

Voila maintenant le code js qui déclenche l'ouverture ou la fermeture du menu:

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
$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
 
	/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
	$.easing.def = "easeInOutQuad";
 
	/* Binding a click event handler to the links: */
	$('li.button a').click(function(e){
 
		/* Finding the drop down list that corresponds to the current section: */
		var dropDown = $(this).parent().next();
 
		/* Closing all other drop down sections, except the current one */
		$('.dropdown').not(dropDown).slideUp('slow');
		dropDown.slideToggle('slow');
 
		/* Preventing the default event (which would be to navigate the browser to the link's address) */
		e.preventDefault();
	})
 
});

Voilà, si quelqu'un a déjà eu ce problème ou a une solution je suis preneur

merci d'avance

[bast292]

Bon finalement j'ai trouvé en bricolant un peu, je donne ma solution pour ceux que ca pourrait intéresser.

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
<ul class="container">
      <li class="menu">
      
          <ul>
		    <li class="button"><a href="#" class="green"> </a></li>
			<li class="dropdown <?php if(isset($_GET['valeur'])){if( $_GET['valeur']==1) echo "activ";}?>">
                <ul>
                   <li><a href="?p=page1&valeur=1">Retour accueil</a></li>
				</ul>
			</li>
 
          </ul>
          
      </li>
      
      <li class="menu">
      
          <ul>
		    <li class="button"><a href="#" class="orange"></a></li>          	
 
            <li class="dropdown <?php if(isset($_GET['valeur'])){if( $_GET['valeur']==2) echo "activ";}?>">
                <ul>
                   <li><a href="?p=page6&valeur=2">page6</a></li>
                   <li><a href="?p=page7&valeur=2">page7</a></li>              
	           <li><a href="?p=page8&valeur=2">page8</a></li>		
                </ul>
			</li>
 
          </ul>
          
      </li>
 
      
      <li class="menu">
      
          <ul>
		    <li class="button"><a href="#" class="blue"> </a></li>
 
            <li class="dropdown <?php if(isset($_GET['valeur'])){if( $_GET['valeur']==3) echo "activ";}?>">
                <ul>
                    <li><a href="?p=page10&valeur=3">Page10</a></li>
                    <li><a href="?p=page11&valeur=3">Page11</a></li>
                    <li><a href="?p=page12&valeur=3">Page12</a></li>        
                </ul>
			</li>
 
          </ul>
          
      </li>

En vert mes modifications. Dans mes liens dans les différents sous-menu j'ai ajouter une variable dans l'url qui indique quel sous menu est ouvert. (ex: &valeur=3). Ensuite j'ai rajouter un bout de code php dans chaque sous-menu qui teste la valeur envoyée, et si elle correspond on rajoute une class "activ" au sous-menu.


Il m'a donc suffit ensuite de rajouter une ligne en début de script js pour faire déplier le sous-menu qui contient la class "activ"

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
$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
	$.easing.def = "easeInOutQuad";

	
	$("li.activ").slideToggle('slow');

	
	$('li.button a').click(function(e){
	
		/* Finding the drop down list that corresponds to the current section: */
		var dropDown = $(this).parent().next();
		
		/* Closing all other drop down sections, except the current one */
		$('.dropdown').not(dropDown).slideUp('slow');
		dropDown.slideToggle('slow');
		
		/* Preventing the default event (which would be to navigate the browser to the link's address) */
		e.preventDefault();
	})
	
	
	
	
});

Je l'ai sûrement mal expliqué, mais si ca peut servir à quelqu'un...sait-on jamais, bien que ca ne doit pas être une bonne solution

à bientôt

[ABCIWEB]

... bien que ca ne doit pas être une bonne solution

à bientôt

Si si, quand c'est simple, fonctionnel et que cela répond à tes besoins, c'est souvent une bonne solution

Juste tu pourrais simplifier un peu la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php if(isset($_GET['valeur'])){if( $_GET['valeur']==1) echo "activ";}?>

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php if(isset($_GET['valeur']) && $_GET['valeur']==1) echo "activ";?>

mais bon c'est un détail et les deux codes sont équivalents.