Affichage / Masquage du menu ...

[thirt7505]

Bonjour à vous,

j'ai un menu qui est censé apparaître sur chacun des articles.

Le menu apparaît bien mais j'ai quelques anomalies que je n'arrive pas à résoudre.

Si j'ouvre un 1er menu en cliquant sur un article et que je clique sur les 3 petits d'un autre article, le 1er menu ouvert ne disparaît pas. Je dois automatiquement recliquer sur les 3 petits points pour que le menu disparaisse sélectionné disparaisse ou à côté pour que les 2 ou plusieurs menus ouverts disparaissent.

Voici à quoi ressemble mon code :

https://codepen.io/anon/pen/MNEOOG

Merci à vous,

Passez une agréable journée
Thierry

[webmaster]

Bonjour

Il suffit de forcer l'effacement pour tous les div dropdown-content en ajoutant cette instructions en ligne 4 du JS codepen
$(".dropdown-content").removeClass("show");

[thirt7505]

Bonjour à vous,

merci pour votre réponse à mon message et pour votre aide. Votre solution fonctionne à merveille mais, malheureusement, j'ai remarqué un autre souci.

Quand on clique sur le menu d'un article, le menu apparaît naturellement. Par contre, quand je clique de nouveau sur ces 3 petits points, le menu ne disparaît pas. Je n'en suis pas sûr mais je pense que je dois tester si la classe "show" existe déjà pour la faire disparaître et l'inverse si elle n'existe pas.

Merci d'avance

Bonne journée
Thierry

[webmaster]

Effectivement, je n'avais pas identifié ce besoin

Du coup, il faut identifier le bouton qui vient d'être cliqué en lui ajoutant l'attribut actif='on'
Et ne pas enlever la classe sur le menu de ce bouton
Voici ce que ca donne :

Code : Tout sélectionner

$('.container').on('click','.article .dropbtn', e=>{
  e.preventDefault();
  e.stopPropagation();
  $(e.target).next('nav').attr('actif', "on");    ;
  $(".dropdown-content[actif!='on']").removeClass("show"); 
  $(e.target).next('nav').toggleClass('show');
  $(e.target).next('nav').attr('actif', "");
});

Je pense que ca sera bon

[thirt7505]

Bonsoir à vous,

merci pour votre aide et votre disponibilité.

En effet, votre solution fonctionne à merveille. Merci pour vos explications également.

Si cela ne vous dérange pas, j'aurai peut-être encore 2 questions à vous poser.

1) Je sais que je dois utiliser la propriété z-index afin de pouvoir faire disparaître les 3 petits points du menu qui restent quand même au-dessus de l'affichage du menu d'un autre article mais je n'arrive pas à les faire disparaître quand le menu s'affiche. C'est le dernier problème que je dois essayer de résoudre par rapport à l'affichage de ce menu.
2) J'aimerais avoir votre avis sur le point suivant. En fait, le menu est toujours affiché de la même façon par rapport aux 3 petits points. Je me demande si ce ne serait pas préférable que j'écrive une petite fonction javascript pour savoir où l'utilisateur se trouve par rapport à la page et, de cette façon, voir où ce serait préférable d'afficher le menu (en bas des 3 petits points, eu haut des 3 petits points, à gauche des 3 petits points, ...) ?

Merci d'avance pour votre aide.

Passez une agréable soirée
Thierry

[webmaster]

Bonjour

Le z-index est facile à utiliser. C'est l'élément avec le z-index le plus élevé qui est affiché au premier plan (et donc qui passe au dessus)
Il suffit de le définit dans la classe CSS de l'élément

Pour le point 2, on entre dans de la gestion poussée qui nécessite de mesurer les positions et la zone visible. Avec jQuery c'est faisable, mais ca va faire mal à la tête