html - 移动按钮下方的输入字段

Question

我有一个问题如何设置。这是示例：http: //jsfiddle.net/VBS4E/25/

将输入字段移动到按钮正下方的好方法是什么？像这样：

 ________   __________   __________
|  Btn#1 |  |  Btn#2 |  |   Btn#3  |
 ________    _________   __________

当点击 Btn#2 时，

 ________   __________   __________
|  Btn#1 |  |  Btn#2 |  |   Btn#3  |
 ________    _________   __________
                 _____________
         Label: |_____________|

Answer 1

您可以获取按钮的位置，然后使用 CSS 将字段绝对定位在其下方。我在顶部添加了 20，所以它在按钮下方 20px。

$(function(){
    $('div#Adv').hide();    
    $('.toggle-link').click(function(e){
        var pos = $(this).position();
        e.preventDefault();
        $('#Adv').css({
            position: "absolute",
            top: pos.top + 20 + "px",
            left: pos.left + "px"}).toggle('show');
    });
});

演示