Menu vertical en accordéon

**Décibel** · 22/12/2022, 18h22

Bonjour,

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

Voici mon code

Code html :

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

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 !

**Toufik83** · 22/12/2022, 21h28

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 ?

**Décibel** · 23/12/2022, 09h39

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...

**SpaceFrog** · 23/12/2022, 10h03

Code :

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

1
2
classList.addClass
classList.removeClass

**Décibel** · 23/12/2022, 11h27

Voici le code HTML du menu :

Code html :

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
<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 :

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

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 :

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

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 :

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
( 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 );

**Toufik83** · 23/12/2022, 12h57

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 :

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

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

ou bien :

Code :

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

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 :

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

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...*/
}

**Décibel** · 23/12/2022, 13h20

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.

**Décibel** · 23/12/2022, 13h37

Envoyé par Toufik83

...

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

Code :

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

$(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 css :

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

.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 !

**Toufik83** · 23/12/2022, 14h07

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.

**Décibel** · 23/12/2022, 15h58

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 ?

**Toufik83** · 23/12/2022, 17h41

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 :

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
$('#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')
        });
    });
});

**Décibel** · 23/12/2022, 19h36

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 Javascript :

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
<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 HTML :

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
<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 CSS :

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
#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 HTML :

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

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 CSS :

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

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

**Décibel** · 20/01/2023, 21h10

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...

Menu vertical en accordéon

jQuery

Discussions similaires

Partager

Partager