javascript - JQuery: show div below pushed button - Stack Overflow

admin管理员组

文章数量:1355031

How can I show the div-element below the pushed button?

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
})

How can I show the div-element below the pushed button?

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
})

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 14, 2014 at 10:39 VB_ asked Jan 14, 2014 at 10:31 VB_VB_ 45.7k4444 gold badges161161 silver badges312312 bronze badges 2

• 1 Note that only modern browsers support the const statement. – Ram Commented Jan 14, 2014 at 10:35
• check my answer, is this what you want – rajesh kakawat Commented Jan 14, 2014 at 10:39

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Because your div has an id not class so you have to use # notation for ids:

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

Not sure if your button is allready visible or not before you want to replace it. But this puts the div after the clicked button:

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

http://jsfiddle/6FLLt/

If you want to show() it use

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

http://jsfiddle/6FLLt/2/

UPDATE

If you want to place the message below the buttons visually you have to change to html and CSS like so:

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/6FLLt/5/

try something like this

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

Note : User # for id and .(dot) for class

How can I show the div-element below the pushed button?

Set the margin of the div accordingly (to show the div directly below the pushed button):

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

Note: You should .stop() before attempting the animation, because when you click another button, the earlier animation might still be underway, hence giving unexpected results.

Aside: You need to use the $('#...') selector, because popup is an id.

本文标签： javascriptJQuery show div below pushed buttonStack Overflow