展开隐藏焦点上相邻按钮的输入

Question

我有一个带有两个按钮的Bootstrap页面，每个按钮旁边都有一个输入。当用户关注'输入时我想淡出按钮并将输入扩展到全宽，同样当用户模糊输入时缩小它并淡入按钮。

正如您在下面的小（对不起）GIF中看到的那样，它可以在模糊时找到，但是当它聚焦时输入扩展得太快，因此被推到下面的线上。

这是我的代码：

JS

$("#message").focus(function(){
    $('#disconnect').fadeOut("fast");
    $('#send_picture').fadeOut("fast");
    $(this).parent().addClass("col-md-12").removeClass("col-md-8");
    console.log("You focused the message input...");
});
$("#message").blur(function(){
    $(this).parent().addClass("col-md-8").removeClass("col-md-12");
    $('#disconnect').fadeIn("fast");
    $('#send_picture').fadeIn("fast");
    console.log("You unfocused the message input...");
});

HTML

<div class="row">
    <div class="col-md-2">
        <button type="button" id="disconnect" class="btn btn-danger btn-block">Disconnect</button>
    </div>
    <div class="col-md-2">
        <button type="button" id="send_picture" class="btn btn-primary btn-block">Send a picture</button>
    </div>
    <div class="col-md-8">
        <input class="form-control" id="message" placeholder="Enter your message and hit enter..." type="text">
    </div>
</div>

Answer 1

位置absolute按钮元素和relative定位容器div内的输入，这将确保它们不会互相影响，您也可以使用z-index和{ {3}}之后