展開輸入隱藏焦點上的相鄰按鈕

我有一個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

展開輸入隱藏焦點上的相鄰按鈕

回答

相關問題