Javascript JQuery：在按下的按钮下方显示div

如何显示按钮下方的

div

-元素

html:

---

试试这样的

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

注：用户

#

表示id，

（点）表示类

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

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

演示：

注意：在尝试动画之前，您应该

.stop（）

，因为当您单击另一个按钮时，早期的动画可能仍在进行中，因此会产生意外的结果

---

旁白：您需要使用

$（'#…'）

选择器，因为弹出窗口是一个

id

，因为您的div有一个

id

而不是

类

，所以您必须对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");
});

---

在更换按钮之前，不确定按钮是否已准备就绪。但这会将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"); 
})

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

如果您想

show（）

使用

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

更新

如果要将消息直观地放置在按钮下方，则必须更改为html和CSS，如下所示：

HTML

---

请注意，只有现代浏览器才支持const语句。请检查我的答案，这就是您想要的吗？请不要在按钮下方显示div。距离太远了谢谢！仍然不起作用，但我这边可能有问题（css？）。所以我会自己解决这些问题，但如果我点击第一个按钮，弹出窗口将移动接下来的两个按钮。这意味着

之后的
在
右侧
而不是下方的
啊，我想我现在明白你的问题了。我以为你的意思是在代码下面。但你是说光学的。我想您必须将按钮包装在
div
中，并带有
位置：relative
。然后，您可以用负边距抵消邮件。查看我更新的小提琴：它对我有效，但与
insertAfter
的问题相同（请参阅上面的答案）。所以请投我一票。另外，你的意思可能是在（e.target）
$("button").click(function(){
    $("#popup").insertAfter($(this));
});

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

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

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