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";

使用Bootstrap和jQuery不改变Div宽度

1 个答案: