Question

如何在按下的按钮下方显示div - 元素？

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

Answer 1

因为您的div的id不是class，所以您必须使用#表示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");
});

Demo

Answer 2

在您想要更换按钮之前，不确定您的按钮是否已经可见。但这会将div放在单击按钮之后：

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

http://jsfiddle.net/6FLLt/

如果你想show()使用

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

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

更新

如果您想在视觉下方将消息放在按钮下方，您必须更改为html和CSS，如下所示：

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/

Answer 3

尝试这样的事情

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

注意：用户#表示ID，.（点）表示

Answer 4

如何在按下按钮下方显示div元素？

相应地设置div的边距（在按钮的正下方显示div）：

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

演示： http://jsfiddle.net/abhitalks/5ef5L/

注意：在尝试动画之前，您应该.stop()，因为当您点击另一个按钮时，之前的动画可能仍在进行中，因此会产生意外结果。

除了：您需要使用$('#...')选择器，因为弹出是id。

JQuery：在按钮下方显示div

4 个答案:

Demo