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

我有一个Bootstrap页面，其中包含两个按钮，每个按钮旁边都有一个输入。当用户关注输入时，我想淡出按钮并将输入展开为全宽，并且在用户模糊输入时同样缩小并淡入按钮。展开输入隐藏焦点上的相邻按钮

正如您在下面的小（遗憾）GIF中可以看到的，当它变得模糊时可以找到它，但是当它被聚焦时，输入会快速膨胀，从而被推到下面的线上。 Current

这是我的代码：

$("#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>

来源

2013-10-18 Benedict Lewis

将您的addclass行放入回调到fadeout行的例如$（'＃send_picture '）.fadeOut（“fast”，function（）{$（this）.parent（）。addClass（“col-md-12”）。removeClass（“col-md-8”）;}）; –

位置absolute按钮元件和relative位于C内的输入ontainer div，这将确保它们不会相互侵入，您也可以使用z-index和delays之后

来源

2013-10-18 10:54:58 antpaw

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

回答

相关问题