Javascript Girl
  1. Javascript Girl
  3. JQuery: affiche div ci-dessous le bouton poussé
Intereting Posts
Q promesses – Node.js fonction pour chaque élément dans le tableau Comment puis-je utiliser hasClass pour détecter si une classe n'est PAS la classe que je veux? Comment régler le volume de l'audio HTML5? Boîte de dialogue d'image – étendez onOk, au lieu de l'écrasement total AddEventListener pour plusieurs éléments ne fonctionne pas avec l'événement "focus" Texte JavaScript entre guillemets Addition d'objets et de tableaux Preg: comment écrire un modèle de preg pour obtenir le nom de domaine à partir d'un courrier électronique? Est un point dans un chemin fermé – SVG Javascript Comment cacher / afficher une colonne dans un graphique de colonne de base de diagrammes élevés? Veuillez expliquer les fermetures ou lier le compteur de boucles à la portée de la fonction Comment je déclenche le "System Bell" dans nodejs L'entrée HTML5 requise, faites défiler jusqu'à la saisie avec la barre de navigation fixe sur submit Opérateurs de comparaison JavaScript: Identité vs Égalité Quel est le but du constructeur Javascript?

JQuery: affiche div ci-dessous le bouton poussé

Comment puis-je afficher l'élément div sous le bouton poussé?

Html: 

 <button id="one" class="btn">One</button> <button id="two" class="btn">Two</button> <button id="three" class="btn">Three</button> <div id="popup">Message!</div>

JS: 

 $('.btn').click(function(e) { const targetBtn = e.target; $("#popup").show("slow").delay(3000).hide("slow"); //HOW TO SHOW IT BELOW TARGET BUTTON })

Parce que votre div a un id pas class donc vous devez utiliser # notation pour les ID: 

 $('.btn').click(function (e) { $("#popup").css({ 'position': 'absolute', 'left': $(this).offset().left, 'top': $(this).offset().top + $(this).height() + 5 }).show("slow").delay(3000).hide("slow"); });

Démonstration

Vous ne savez pas si votre bouton est déjà visible ou non avant de le remplacer. Mais cela met le div après le bouton cliqué: 

 $("button").click(function(){ $("#popup").insertAfter($(this)); });

http://jsfiddle.net/6FLLt/

Si vous souhaitez show() , utilisez-vous 

 $("button").click(function(){ $("#popup").show().insertAfter($(this)); });

http://jsfiddle.net/6FLLt/2/

METTRE À JOUR

Si vous souhaitez placer le message sous les boutons visuellement, vous devez passer à html et CSS comme ceci:

HTML 

 <div class="relative"> <button id="one" class="btn">One</button> </div> <div class="relative"> <button id="two" class="btn">Two</button> </div> <div class="relative"> <button id="three" class="btn">Three</button> </div> <div id="popup">Message!</div>

CSS 

 #popup{position:absolute; bottom:-20px; display:none;} .relative{position:relative; float:left;}

http://jsfiddle.net/6FLLt/5/

Essayez quelque chose comme ça 

 $('.btn').click(function(e) { $(this).after($('#popup')); })

Remarque: User # for id and . (Point) pour la classe

Comment puis-je afficher l'élément div sous le bouton poussé?

Réglez la marge du div en conséquence (pour afficher le div directement sous le bouton poussé): 

 $('.btn').click(function(e) { var $elem = $(e.target), $div = $('#popup'); $div.css('margin-left', $elem.offset().left + 'px'); $("#popup").stop().show("slow").delay(500).hide("slow"); })

Demo : http://jsfiddle.net/abhitalks/5ef5L/

Remarque : Vous devriez .stop() avant de tenter l'animation, car lorsque vous cliquez sur un autre bouton, l'animation précédente pourrait encore être en cours, ce qui donne des résultats inattendus.

A part : vous devez utiliser le sélecteur $('#...') , car popup est un id .