如何在按钮下显示div

我有一个jQuery按钮，当我按下它时，我想在它下面出现一个简单的div。

我将div位置设置为相对但是如何将我的div放在按钮下方，无论按钮位于何处？

Answer 1

我会使用绝对定位，而不是相对。 然后，在按钮的单击事件处理程序中，只需将div的顶部设置为等于按钮的顶部加上按钮的高度加上它们之间的所需空间。 同样，将div的左侧设置为按钮的左侧。 这些计算可以使用offset ^{[ API ]}和outerHeight ^{[ API ]}方法生成一个div，该div位于按钮下方并与按钮的左侧齐平。

例如…

 $('#btn').click(function() { var btn = $(this); $('#div').css({ position: 'absolute', top: btn.offset().top + btn.outerHeight() + 10, left: btn.offset().left }).show(); }); 

如果希望div相对于按钮居中或右对齐，则相应地调整坐标计算。

Answer 2

这个答案可能取决于你的CSS，但是在DOM中的按钮之后附加一个div ：

 $('#button_id').click( function(){ $('
').insertAfter($(this)); return false; }); 

JS小提琴演示 。

参考文献：

• click() 。
• insertAfter() ;