Menu vertical en accordéon

Version imprimable

Bonjour,

Je ne suis pas très doué en javascript...

Voici mon code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <style> .open{display:block} </style> <body onload="openmenu()"> <script> function openmenu() { var element = document.getElementById("menu344"); element.classList.add("open"); } </script>
Cela permet de déployer un menu (#menu344) en accordéon vertical et ça marche très bien...
Mais si l'internaute clique sur un autre menu, le menu déployé ne se ferme pas...
l'ID #menu344 est généré en PHP...
Comment faire pour que soit la classe "open" soit supprimée au prochain clique sur un autre menu, soit faire en sorte qu'elle ne soit appliquée qu'une fois ?

Merci !

22/12/2022, 21h28
Toufik83

Bonjour,

Vous devriez supprimer la classe open de tout les menus, puis l'attribuer seulement à celui qui a été cliqué.

Quel est le code HTML des menus?, ont-ils une classe CSS commune ?
23/12/2022, 09h39
Décibel

Merci Toufik83 pour votre réponse...
Non la class open n'est pas sur tous les menus, juste sur le menu #menu344...
Et oui elle est bien attribué au menu de la page courante...
Ma question n'est pas là...
C'est comment supprimer la class open du menu344 car elle reste active...

Code:

1
2
classList.addClass
classList.removeClass

Voici le code HTML du menu :

Code:

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
<div id="divmenu">
    <div id='cssmenu' onclick="close()">
        <ul>
            <li><a href='index.php><span >Voyage Désert Maroc</span></a></li>							
	    <li class='has-sub'><a href='#' ><span >TREK DÉSERT </span></a>
                <ul id="menu443" class="">				
                      <li ><a href="randonneedesertmaroc.php" title="">TREK DÉSERT 3 jours</a></li>
                      <li ><a href="trekdansledesert.php" title="">TREK DÉSERT</a></li>
                      <li ><a href="mehareedesert4jours.php" title="">Méharée désert  4 jours</a></li>
                      <li class='activee '><a href="circuitdesert.php" title="">Circuit désert  5 jours</a></li>
                </ul>
            </li>
            	<li class='has-sub'><a href='#' title="CIRCUIT DÉSERT  EN 4X4" ><span >CIRCUIT DÉSERT  EN 4X4</span></a>
                <ul id="menu444" >				
                      <li ><a href="excursion-4x4-dans-le-desert.php" >Excursion Désert en 4×4</a></li>
                      <li ><a href="excursiondesert.php" >Circuit désert  1 nuit</a></li>
                      <li ><a href="circuitdesertmaroc.php" title="">Circuit désert 3 Jours</a></li>
                 </ul>
            </li>
            	<li class='has-sub'><a href='#' title="CIRCUIT MAROC DEPART MARRAKECH" ><span >CIRCUIT MAROC DEPART MARRAKECH</span></a>
                <ul id="menu447" >				
                    <li ><a href="circuitdesertmarrakech.php" >Circuit 3 jours</a></li>
                    <li ><a href="excursiondesertdepartmarrakech.php" >Circuit 4 jours</a></li>
                    <li ><a href="excursionmarocdepartmarrakech.php" >Circuit 5 jours</a></li>
                </ul>
            </li>
            	<li><a href='equipedesertmaroc.php' ><span >Equipe </span></a></li>							
		<li><a href='contact.php' title=""><span >Contact</span></a></li>							
	</ul>
    </div>
</div>

Fonction openmenu sur onload de la page

Code:

1
2
3
4
function openmenu() {
		var element = document.getElementById("menu443");
		element.classList.add("maroc");
}

J'ai rajouté une fonction close sur <div id='cssmenu' onclick="close()">

Code:

1
2
3
4
function close() {
		var element = document.getElementById("menu447");
		element.classList.remove("maroc");
}

Mais ça ne marche pas...

Voici le code javascript qui gère le menu (qui n'est pas de moi !)

Code:

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
( function( $ ) {
$( document ).ready(function() {
$(document).ready(function(){
 
$('#cssmenu > ul > li ul').each(function(index, e){
  var count = $(e).find('li').length;
  var content = '<span class=\"cnt\">' + count + '</span>';
  $(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});
 
});
 
});
} )( jQuery );

Bonjour,

Déjà le code jQuery n'est pas vraiment Ok, vous utilisez deux $(document).ready() à l'intérieur de (function($){...})(jQuery), c'est comme si vous mettez 3 fonctions qui ont le même rôle l'une à l'intérieur de l'autre.

Un seul $(document).ready() ou (function($){...})(jQuery) sera largement suffisant.
Code:

1 2 3 $(document).ready(function(){ /*Le code Complet ici ....*/ });
ou bien :
Code:

1 2 3 (function($){ /*Le code complet ici...*/ })(jQuery)
Revenant au problème initial, si vous modifiez la ligne 17 du code JS comme suite, ça donne le résultat prévu ou pas ? :
Code:

1 2 3 4 5 if((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.removeClass('maroc').slideUp('normal');//changement /*le reste du code...*/ }

23/12/2022, 13h20
Décibel

Citation:

Envoyé par SpaceFrog

...

Non, plus rien ne marche...
https://developer.mozilla.org/en-US/...ment/classList
Although the classList property itself is read-only, you can modify its associated DOMTokenList using the add(), remove(), replace(), and toggle() methods.
23/12/2022, 13h37
Décibel

Citation:

Envoyé par Toufik83

...

J'ai fait la chose, mais cela ne change rien...
J'ai écris cela :

Code:

$(this).closest('li').removeClass('active maroc');

Je précise que la class .maroc qui oblige le bon sous-menu, où est la page courante, est écrit ainsi :

Code:

.maroc {display:block !important}

Si j'enlève le "!important" ça ne marche plus...

J'en ai profité pour supprimer les lignes en trop, merci !
23/12/2022, 14h07
Toufik83

Bonjour,

Désolé, je me suis trompé dans mon message précédant, je l'ai rectifié et supprimer la classe .maroc de l'élément checkElement.
23/12/2022, 15h58
Décibel

Cool, on avance, merci Toufik83 !!!
Si je clique sur le sous-menu #344 qui est ouvert au chargement de la page, page qui est dans le sous-menu #344, le menu se referme et si je clique sur un autre sous-menu, le menu #344, ne se réouvre pas...

Mais...

Mais, si je clique par exemple sur le sous-menu #347, le menu #344 reste toujours ouvert, en fait il se ferme et se réouvre...
C'est à die que le sous-menu #347 s'ouvre et le sous-menu #344 devrait se fermer, là il se ferme et se réouvre en même temps que le #347...

Je peux t'envoyer le lien de la page si tu veux en MP ?

Bonjour,

Oubliez les classes maroc et open, vous pouvez simplement utiliser active sans compliquer les choses.

Ajoutez la classe .active à <li class='has-sub active'><a href='#'><span>TREK DÉSERT </span></a>
Cachez tout les menu ayant un id en CSS #cssmenu > ul li > ul[id]{display:none}
Afficher seulement le menu enfant de la classe .active en CSS #cssmenu .active > ul[id]{display:block}

Maintenant, le code de clic sur les liens devient :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $('#cssmenu > ul > li > a').click(function(e) { if ($(this).attr('href') == "#") e.preventDefault(); $('#cssmenu ul > li').not($(this).parent()) .find('ul[id]').slideUp("normal", function() { $(this).parent().removeClass('active'); }) .closest('#cssmenu').find(this).siblings('ul[id]') .each(function() { if ($(this).is(':visible')) $(this).slideUp('normal', function() { $(this).parent().removeClass('active'); }) else $(this).slideDown('normal', function() { $(this).parent().addClass('active') }); }); });

OUI !!!!!!!!!
Ça marche !!!
Merci !!!!!

Je remet ici tout le code pour ceux qui en aurait besoin :
Code pour un menu vertical accordéon avec ouverture du sous-menu de la page affichée, si la page est dans un sous-menu

Code:

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
<script>
 
$(document).ready(function(){
 
 
$('#cssmenu > ul > li ul').each(function(index, e){
  var count = $(e).find('li').length;
  var content = '<span class=\"cnt\">' + count + '</span>';
  $(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
 
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active');	
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;	
  }		
});
 
} )( jQuery );
 
</script>

Code:

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
<div id='cssmenu'>
        <ul>
            <li><a href='index.php><span >Voyage Désert Maroc</span></a></li>							
	    <li class='has-sub'><a href='#' ><span >TREK DÉSERT </span></a>
                <ul id="menu443">				
                      <li ><a href="randonneedesertmaroc.php" title="">TREK DÉSERT 3 jours</a></li>
                      <li ><a href="trekdansledesert.php" title="">TREK DÉSERT</a></li>
                      <li ><a href="mehareedesert4jours.php" title="">Méharée désert  4 jours</a></li>
                      <li class='activee '><a href="circuitdesert.php" title="">Circuit désert  5 jours</a></li>
                </ul>
            </li>
            	<li class='has-sub active'><a href='#' title="CIRCUIT DÉSERT  EN 4X4" ><span >CIRCUIT DÉSERT  EN 4X4</span></a>
                <ul id="menu444">				
                      <li ><a href="excursion-4x4-dans-le-desert.php" >Excursion Désert en 4×4</a></li>
                      <li ><a href="excursiondesert.php" >Circuit désert  1 nuit</a></li>
                      <li ><a href="circuitdesertmaroc.php" title="">Circuit désert 3 Jours</a></li>
                 </ul>
            </li>
            	<li class='has-sub'><a href='#' title="CIRCUIT MAROC DEPART MARRAKECH" ><span >CIRCUIT MAROC DEPART MARRAKECH</span></a>
                <ul id="menu447">				
                    <li ><a href="circuitdesertmarrakech.php" >Circuit 3 jours</a></li>
                    <li ><a href="excursiondesertdepartmarrakech.php" >Circuit 4 jours</a></li>
                    <li ><a href="excursionmarocdepartmarrakech.php" >Circuit 5 jours</a></li>
                </ul>
            </li>
            	<li><a href='equipedesertmaroc.php' ><span >Equipe </span></a></li>							
		<li><a href='contact.php' title=""><span >Contact</span></a></li>							
	</ul>
    </div>

Code:

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
#cssmenu,
	#cssmenu ul,
	#cssmenu li,
	#cssmenu a { margin:0; padding:0; border:0; list-style:none; font-weight:normal; text-decoration:none; line-height:1;font-size:16px; position:relative; }
	#cssmenu a { line-height:1.3; }
	#cssmenu { width:100%;}
	#cssmenu > ul > li > a { padding-right:40px; font-size:25px; font-weight:bold; display:block; background-color:rgba(235,201,139,0.8); color:#7F4930; border-bottom:1px solid #5e071b; text-transform:uppercase;transition:all .5s; }
	#cssmenu > ul > li > a > span { background-color:rgba(235,201,139,0.5); padding:20px 15px; display:block; font-size:13px; font-weight:300;transition:all .5s; }
	#cssmenu > ul > li > a > span:hover { text-decoration:none;background-color:rgba(255,255,255,0.2);transition:all .5s; }
	#cssmenu > ul > li > a:hover { text-decoration:none;background-color:rgba(255,255,255,0.2);transition:all .5s; }
	#cssmenu > ul > li.active { border-bottom:none; }
	#cssmenu > ul > li.active > a { color:#7F4930; }
	#cssmenu > ul > li.active > a span { background-color:rgba(255,255,255,0.2) }
	#cssmenu .active > ul[id]{display:block}
	.activee {background-color:rgba(255,255,255,0.6) !important}
	.contactc {font-size:24px !important;font-weight:bold !important}
	#cssmenu span.cnt { position:absolute; top:16px; right:15px; padding:0; margin:0; background:none; font-size:20px }
	/* Sub menu */
	#cssmenu ul ul { display:none; }
	#cssmenu ul ul li { border:1px solid #e0e0e0; border-top:0; background-color:#F4E7CC}
	#cssmenu ul ul a { padding:10px; display:block; color:#7F4930; font-size:13px; }
	#cssmenu ul ul a:hover { color:#7F4930; background-color:#FFF;transition:all .5s; }
	#cssmenu ul ul li { background-color:#F4E7CC; }
	/*#cssmenu ul ul li.even { background:#fff; } */
	#smarphone {width:auto; font-size:18px; padding:0; margin:0; background-color:#CCC; color:#7F4930; display:none;z-index:900;position:relative}

Pour la gestion responsive du menu vertical déroulant rajouter ce div dans le BODY :

Code:

1
2
3
<div id="smarphone">
	<a href="#" id="toggler"><img src="images/bouton.gif" alt="Menu" class="vermi"> MENU</a>
</div>

Et son CSS pour le bouton

Code:

1
2
.vermi {vertical-align:middle;transition:all .5s;}
.vermi:hover { transform: scale(1.1) rotate(90deg);transition:all .5s;box-sizing:border-box}

20/01/2023, 21h10
Décibel

Il y a un petit bug...
Juste un petit bug, c'est que si il n'y a qu'un seul menu avec des sous-menus l'accordéon ne se déplie pas...