如何使div出现在按钮下

Question

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

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

Answer 1

我会使用绝对定位，而不是相对。然后，在按钮的click事件处理程序中，只需将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为中心或右对齐相对于该按钮，然后相应地调整坐标计算。

Answer 2

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

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

JS Fiddle demo。

参考文献：

• click()。
• insertAfter();