11325 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Tout d'abord, le pen : Tabs.

Donc, à partir d'une base html details/summary je crée une série d'onglets et de panneaux si l'élément parent contient la classe "tabs". Je n'ai pas encore fini l'implémentation des aria, mais c'est fonctionnel en l'état.

Avant d'aller plus loin j'ai voulu vérifier mon code avec des onglets eux-même imbriqués dans un panneau et là... j'ai un conflit avec les onglets parents :
- je n'arrive pas à cliquer sur les onglets imbriqués, sauf via la navigation au clavier,
- un clique sur un élément parent fait disparaître les panneaux des onglets enfants.

Le deuxième point montre bien que les onglets et panneaux "enfants" se comportent en réalité comme des élements "frères", d'ailleurs l'attribution des id et des aria dans le DOM le confirme. C'est sans doute un problème de spécificité d'un sélecteur sur une boucle dans le javascript, mais après plusieurs tentatives de sélections plus fines que le code actuel (avec le sélecteur CSS combinateur d'enfant ou avec l'api DOM de JavaScript) je n'ai pas réussi à régler mon problème.

Un petit regard expert serait le bienvenu...
Modifié par Olivier C (15 Apr 2022 - 12:57)
Modérateur
Salut Olivier,

Je pense que l'erreur est simple, cela vient du z-index appliqué sur ton .panel. Mon acheminement:
- pq le hover ne réagit pas alors qu'au clavier, il fonctionne ?
? Probablement un problème CSS plus que JS
- inspecter le panel et sélectionner le div parent… c'est sur, c'est CSS.
? Après, j'ai cherché un pointer-events, ou truc du genre

Smiley smile
Modérateur
Même constat et reflexion que @Yordi

Avant de tout inspecter, j'ai tester sans aucun style => le js fonctionne parfaitement

Puis j'ai chercher un z-index , et c'est apparement le fautif Smiley smile

le z-index:-1 de & .tab-panel est a repasser a 0 ou à retirer tout simplement et inversement, donner ce z-index : 1 à & button pour cacher cette bordure .

cdt
Modifié par gcyrillus (15 Apr 2022 - 19:57)
Je vous remercie messieurs. Du coup j'ai mis un `z-index: 1` sur les onglets plutôt qu'un `z-index: -1` sur les panneaux et cela règle ce premier point.

Mais le problème de fond est bien lié au javascript puisque les onglets "enfants" font en réalité partie de la même hiérarchie que les éléments parents, alors qu'il faudrait qu'ils soient dissociés.

J'obtiens ceci :
.tabs
  .tab-list
    button#tab-summary-1
    button#tab-summary-5
    button#tab-summary-6
  #tab-panel-1.tab-panel
    .tabs
      .tab-list
        button#tab-summary-2
        button#tab-summary-3
        button#tab-summary-4
      #tab-panel-2
      #tab-panel-3
      #tab-panel-4
  #tab-panel-5
  #tab-panel-6

Mais je voudrais obtenir ceci :
.tabs
  .tab-list
    button#tab-summary-1
    button#tab-summary-2
    button#tab-summary-3
  #tab-panel-1.tab-panel
    .tabs
      .tab-list
        button#tab-summary-4
        button#tab-summary-5
        button#tab-summary-6
      #tab-panel-4
      #tab-panel-5
      #tab-panel-6
  #tab-panel-2
  #tab-panel-3

Je continue à chercher...
Modifié par Olivier C (17 Apr 2022 - 13:24)
Modérateur
Bonjour,

En effet je n'avais pas remarqué qu'une partie des panels de sous niveau pouvaient disparaitres.

Peut-être qu'en testant si tab et panel ont le même parent avant d'appliquer un display:none suffirait à éliminer ton bug, ou du moins à mettre le doigt dessus ?

Condition a tester éventuellement
if(panel.parentElement === tab.parentElement.parentElement)  panel.style.display = 'none'

à la place de (ligne 68)
panel.style.display = 'none'


Cdt
Modifié par gcyrillus (17 Apr 2022 - 15:16)
Meilleure solution
Félicitations mon cher gcyrillus, ta solution est correcte. Sujet résolu (haut la main) !

Je ne regrette pas de vous avoir posé la question, je galèrais vraiment pour trouver la solution. Merci beaucoup !