Question

我有一架Bootstrap手风琴。

<div class="panel-heading">
  <button type="button" class="btn btn-success col-xs-4" id="more-info-button" data-toggle="collapse" data-target="#collapseOne">
    I want to input more stuff.
  </button>
</div>

<div id="collapseOne" class="panel-collapse collapse">
  <div class="panel-body">
    This is another form field.
  </div>               
</div>

当我点击#more-info-button时，我开始执行Bootstrap.js'手风琴动画。 #collapseOne的课程从.collapse到.collapsing到.collapse-in，反之亦然。

我希望发生同样的事情，但是当我在复选框上添加复选标记时：

<div class="checkbox">
  <label>
    <input type="checkbox" name="revealTextInputField" value="">Check me to review another text input field.
  </label>
</div>

这个想法是，如果用户检查了这个，那么另一个表单字段将通过手风琴下拉。

当然我可以用jQuery的.toggle或add/remove class方法做到这一点，但是有3个不同的类，它们有动画......所以我不太清楚如何去做。< / p>

修改

Bootply：http://www.bootply.com/pb1pfUxino

Answer 1

尝试

$('input[name="revealTextInputField"]').change(function(){
    $('#collapseOne').collapse(this.checked? 'show' : 'hide')
})

演示：Fiddle

如何使用jQuery执行Bootstrap数据切换操作？

1 个答案: