Discussion :

[thirt]

Bonjour à tous,

au départ, dans ma page d'origine, j'ai la possibilité de cliquer sur les 3 petits points pour afficher le menu.

Si j'ajoute un article dynamiquement en cliquant sur le bouton "Ajout article" dans le header, je n'ai plus la possibilité d'afficher le menu.

1) Trouvez-vous que c'est une bonne méthode pour afficher le menu quand on clique sur les petits avec ce code javascript ?
2) Existe-t-il une autre méthode qui me permettrait d'afficher ce menu plus facilement ? En fait, ce menu doit s'afficher sur chaque article comme vous l'aviez certainement deviné.

Voici une copie du code à l'heure actuelle :

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

Menu pour votre aide.

Passez une agréable journée
Thierry

[SpaceFrog]

je suppose que les trois petit points font partie des choses ajoutées dynamiquement ...
Ils n'héritent pas automatiquement des events attribués sur le onload de la page ...
Il faut leur réattribuer les events après l'ajax ...

[Toufik83]

Salut,

Puisque tu utilises jQuery dans ton code, pourquoi addEventListener ?

Code jQuery :

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
 
$(document).ready(function(){
     $('body').append('<div id="overlay"></div>');
     $('#add_article').on('click', function(e){
        e.preventDefault();
       /* à ta place j'utiliserai clone() pour cloner le premier ou le dernier ".article" au lieu de reconstruire l'html, en une seule ligne :*/
        $('.container').prepend($(".article:first").clone());
    });
   $('.container').on('click','.article .dropbtn', e=>{//attacher l'événement clic sur tous les ".dropbtn" (statiques et dynamiques)
      e.preventDefault();
      e.stopPropagation();//pour ne pas masquer les nav lors d'un clic sur body (fonction en dessous)
      $(e.target).next('nav').toggleClass('show');
     /*  il existe aussi toggleClass au lieu de addClass et removeClass */
   });
 
   $('body').click(e=>{//pour masquer tous les nav lorsqu'on clique quelque part dans le document
      $('.dropdown-content').removeClass('show');
   });  
});

[thirt]

Bonjour SpaceFrog et Toufik83,

tout d'abord, je tenais à vous remercier pour votre réponse.

En fait, au départ, j'ai ma page qui est chargée avec les articles. Donc, à ce moment-là, il n'y a rien de dynamique à partir du javascript. Le menu s'affiche bien quand on clique sur les 3 petits points. Malheureusement, c'est le seul moyen que j'ai trouvé pour afficher le menu à partir des 3 petits points. Il doit exister un autre moyen, peut-être plus facile pour faire cela, notamment en jQuery, mais je n'ai pas trouvé la solution.

En fait, quand l'utilisateur fait une recherche sur un article, ça régénère tous les articles avec du code dynamique cette fois-ci. Malheureusement, le menu ne s'affiche plus quand on clique sur les 3 petits points de ces différents articles.

Comme vous avez certainement pu le constater, les 3 petits points sont affichés via le code suivant :

Code HTML :

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

<input type="button" class="dropbtn" value="⋮">

Merci à vous,

Bonne journée
Thierry

[Toufik83]

as-tu testé mon code ou pas?

[thirt]

Bonjour Toufik83,

merci pour votre réponse.

Votre solution a l'air de bien fonctionner mais je pense que j'ai un problème dans mon cas. En fait, quand je reconstitue dynamiquement les différents articles, je vais rechercher les infos dans la base de données. Donc, les articles existants sont supprimés de la age et remplacés par les nouveaux articles générés à partir de la recherche.

Merci d'avance

Sincères salutations,
Thierry

[Toufik83]

D'accord donc dans ce cas clone() ne te servira pas puisque tu remplaces TOUT LE CONTENU de la page par la réponse du fichier serveur.

Le plus important c'est ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$('.container').on('click','.article .dropbtn', e=>{
      e.preventDefault();//tu peux même supprimer cette ligne puisque le bouton n'est pas de type submit et n'appartient pas à une <form>
      e.stopPropagation();
      $(e.target).next('nav').toggleClass('show');
});
 
$('body').click(e=>{
      $('.dropdown-content').removeClass('show');
});

[thirt]

Boujour Toufik83,

votre solution fonctionne à merveille. Je vous remercie pour votre aide et votre disponibilité.

Passez un agréable week-end.
Thierry