我有一个带有两个按钮的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>
答案 0 :(得分:0)
位置absolute
按钮元素和relative
定位容器div内的输入,这将确保它们不会互相影响,您也可以使用z-index和{ {3}}之后