JQuery: mostrar div debajo de botón pulsado

¿Cómo puedo mostrar la div-elemento debajo del botón pulsado?

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
})
Tenga en cuenta que sólo los navegadores modernos soportan el const declaración.
compruebe mi respuesta, ¿es esto lo que quieres

OriginalEl autor VB_ | 2014-01-14

4 Kommentare

  1. 4

    Porque el div tiene un id no class así que hay que utilizar # notación para los identificadores:

    $('.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");
    });

    Demo

    No mostrar el div debajo del botón. La Distancia es bastante grande
    ver la versión actualizada de uno.
    gracias! Aún así no funciona, pero tal vez hay problemas en mi lado (css?). Así que voy a solucionar estos problemas por mi propia

    OriginalEl autor Jai

  2. 1

    No sabe si el botón es ya visible o no antes de que desea reemplazar. Pero esto pone a la div después de que el botón pulsado:

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

    http://jsfiddle.net/6FLLt/

    Si quieres show() uso

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

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

    ACTUALIZACIÓN

    Si quieres colocar el mensaje debajo de los botones visualmente tiene que cambiar a html y CSS así:

    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/

    Pero si hago clic en el primer botón, entonces emergente que le cambio los próximos dos botones. Significa que after es en el right-hand en lugar de below
    Ah, entiendo que la pregunta ahora que lo pienso. Pensé que significaba debajo de ella en el código. Pero significaba óptica. Supongo que tendría que envolver el botón en un div con un position:relative. A continuación, puede compensar el mensaje con margen negativo. Ver a mis actualizado violín: jsfiddle.net/6FLLt/5

    OriginalEl autor timo

  3. 0

    intentar algo como esto

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

    Nota : el Usuario # para la identificación y .(dot) para la clase

    Por qué downvote????
    A mí me funciona, pero el mismo problema que con insertAfter (ver respuesta anterior). Así upvote de mí. P. S. usted tal vez significa .after(e.target)

    OriginalEl autor rajesh kakawat

  4. 0

    ¿Cómo puedo mostrar el div-elemento debajo del botón pulsado?

    Establecer el margen de la div en consecuencia (para mostrar el div directamente debajo del botón pulsado):

    $('.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/

    Nota: Usted debe .stop() antes de intentar la animación, ya que cuando se haga clic en otro botón, la anterior animación, todavía podría estar en marcha, por tanto de dar resultados inesperados.

    A un lado: Usted necesita usar el $('#...') selector, porque emergente es un id.

    OriginalEl autor Abhitalks

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea