如何在按钮下方显示div

Question

我有一个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，但要在按钮后添加div ：

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

JS Fiddle demo

参考文献：

• click()。
• insertAfter();