带复选框的Bootstrap折叠与其目标

Question

我希望在标记复选框时使用bootstrap collapse来显示元素。

这是我的代码：

<input type="checkbox" data-toggle="collapse" data-target="#collapseExample" />
<div class="collapse" id="collapseExample">
  <div class="well">
    Checked!
  </div>
</div>

https://jsfiddle.net/6sjcqmqx/

请尝试快速检查复选框很多次，您会发现它与目标失去同步，然后在未选中复选框时显示目标。 我认为它与崩溃过渡有关，但也消除了崩溃过渡，这个错误发生了。

如何通过html属性使用bootstrap崩溃来避免这种情况？

Answer 1

您应该以编程方式进行折叠，对于输入标记，请使用onchange事件来获得准确的结果。这是解决方案https://jsfiddle.net/uLhju7es/2/