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

Question

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

正如您在下面的小（抱歉）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和延迟