如何使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();