Cibler une élément pour le cacher
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:
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:
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:
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:
var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
et j'ai essayé d'ajouté ceci qui me fait une erreur
Code:
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
