股利寬度不改變使用自舉和jQuery

Question

<div class="form"> 
<p class="pull-right"><a href="#" class="toggle-form"><i class="fa fa-minus-square" id="toggle-icon"></i></a></p> 
<form class="form-horizontal" role="form" id="contact-form"> 
    <h3><i class="fa fa-envelope-o"></i> Contact Us</h3> 
    <div class="form-group"> 
     <div class="col-sm-12"> 
      <input type="text" class="form-control" id="name" placeholder="Full Name *" required /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-12"> 
      <input type="phone" class="form-control" id="phone" placeholder="Phone Number *" required /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-12"> 
      <input type="email" class="form-control" id="email" placeholder="Email Address" /> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-12"> 
      <span class="pull-right"><small>* indicates required field</small></span> 
      <button type="submit" class="btn btn-default">Submit</button> 
     </div> 
    </div> 
</form> 

$(document).ready(function() { 
$('.toggle-form').click(function(e) { 
    e.preventDefault(); 
    $('#toggle-icon').toggleClass('fa-minus-square fa-plus-square'); 
    var toggleWidth = $(".form").width() == 400 ? "50px" : "400px"; 
    $('.form').animate({ width: toggleWidth }); 
    $('#contact-form').fadeToggle(); 
}); 
}); 

見本JSFiddle Demo。

我使用Google地圖的形式，希望能夠最小化表單，以便人們可以查看地圖。當用戶單擊減號圖標時，我希望div減小到只有圖標的寬度。

看來，Bootstrap（v3.3.1）正在停止減少寬度。如果我排除Bootstrap css文件，它按預期工作。我認爲這可能與盒子大小有關，但不知道如何解決。

任何意見是非常感謝。

Answer 1

這是因爲表單的寬度與條件不符。嘗試更改爲：

$(".form").width() > 50 ? "50px" : "400px";