jquery - 如何让div出现在按钮下方

Question

我有一个 jQuery 按钮，我希望在按下它时在其下方出现一个简单的 div。

我将 div 位置设置为相对位置，但无论按钮在哪里，如何将 div 定位在按钮正下方？

Answer 1

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

例如...

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

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