Bonjour,

Je prends le chou grave à comprendre mais surtout à corriger une erreur d'affichage.
Pour comprendre le problème regarder ceci
http://www.therapie-isch.ch/
et réduisez la taille du navigateur de moitié, jusqu'à ce que vous voyez le bouton "sarmtphone" qui s'affiche.
ce bouton ce présente ainsi
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
<button type="button" class="js-cd-panel-trigger" data-panel="main">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
Appuyez sur le bouton, pour que le menu déroulant s'affiche.

Vous constaterez que la première barre violette, du bouton, reste visible, à côté de mot "Thérapie Isch". En fait tout le bouton est visible sauf que l'on ne voit pas les autres barres puis qu'elles sont de la même couleur du fond du menu qui se déploie.

Ceci ne se produit que sur la page d'accueil.

Pour revenir sur Javascript, J'essaye de modifier le code Javascript, pour que ce bouton se cache quand le menu est déployer, après avoir cliqué sur ce bouton, et.. qu'il apparait quand on a fermé le menu déroulant, ou plus tôt coulissant

Ce script fait le travail:

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
36
37
38
39
40
41
42
43
44
45
46
(function(){
    // Slide In Panel - by CodyHouse.co
	var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
	if( panelTriggers.length > 0 ) {
		for(var i = 0; i < panelTriggers.length; i++) {
			(function(i){
				var panelClass = 'js-cd-panel-'+panelTriggers[i].getAttribute('data-panel'),
					panel = document.getElementsByClassName(panelClass)[0];
				// open panel when clicking on trigger btn
				panelTriggers[i].addEventListener('click', function(event){
					$('.js-cd-panel-trigger').hide();
					event.preventDefault();
					addClass(panel, 'cd-panel--is-visible');
 
 
				});
				//close panel when clicking on 'x' or outside the panel
				panel.addEventListener('click', function(event){
					if( hasClass(event.target, 'js-cd-close') || hasClass(event.target, panelClass)) {
						$('.js-cd-panel-trigger').hide();
						event.preventDefault();
						removeClass(panel, 'cd-panel--is-visible');
					}
				});
			})(i);
		}
	}
 
	//class manipulations - needed if classList is not supported
	//https://jaketrent.com/post/addremove-classes-raw-javascript/
	function hasClass(el, className) {
	  	if (el.classList) return el.classList.contains(className);
	  	else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
	}
	function addClass(el, className) {
	 	if (el.classList) el.classList.add(className);
	 	else if (!hasClass(el, className)) el.className += " " + className;
	}
	function removeClass(el, className) {
	  	if (el.classList) el.classList.remove(className);
	  	else if (hasClass(el, className)) {
	    	var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
	    	el.className=el.className.replace(reg, ' ');
	  	}
	}
})();
et plus particulièrement cette partie

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
// open panel when clicking on trigger btn
				panelTriggers[i].addEventListener('click', function(event){
					$('.js-cd-panel-trigger').hide();
					event.preventDefault();
					addClass(panel, 'cd-panel--is-visible');
 
 
				});
				//close panel when clicking on 'x' or outside the panel
				panel.addEventListener('click', function(event){
					if( hasClass(event.target, 'js-cd-close') || hasClass(event.target, panelClass)) {
						$('.js-cd-panel-trigger').hide();
						event.preventDefault();
						removeClass(panel, 'cd-panel--is-visible');
					}
				});

J'ai essayé plusieurs truc. Déjà pour le cacher, j'ai repris la variable
Code : Sélectionner tout - Visualiser dans une fenêtre à part
var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
et j'ai essayé d'ajouté ceci qui me fait une erreur

Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
panelTriggers.style.display="none";
document.getElementsByClassName('js-cd-panel-trigger').style.display="none" /* ceci devrait faire la même chose */
$('.js-cd-panel-trigger').hide();

La troisième solution n'est pas la meilleur, mais je ne comprends pas pourquoi les deux première ne fonctionne pas.
Je cible un élément par sa classe et je lui dit de se cacher.

Qu'est-ce que je fais de faux?

PS: J'ai aussi chercher avec du CSS, notamment en changeant les valeurs du index:2, sans succès


Merciii