Javascript 折叠延迟功能

Question

我想实现按下按钮时用另一个折叠的内容替换旧的折叠内容的功能。当我尝试使用 Bootstrap 按钮 data-toggle 和 data-taget 属性以及使用 javascript 时，我得到了延迟的隐藏和显示功能。

我的示例代码:

<table class="table"><thead class="thead-inverse"><tr><th>Column1</th><th>Column2</th></tr></thead>

<tr><td><button type="button" class="btn btn-danger text-center" data-toggle="collapse" href="#contentID" id="errorButton"></span>SwapContent</button></td><td><button type="button" class="btn btn-info" data-toggle="collapse" data-target=".contentClass" id="noteButton">SwapContent2</button></td></tr>

<script type="text/javascript">
  $('#errorButton').on('click', function(event) {
    $("#contentID.collapse.danger").collapse("show");
    $(".collapse.info.contentClass, .collapse.warning.contentClass").collapse("hide");
  });
    $('#noteButton').on('click', function(event) {
    $("#contentID.collapse.danger").collapse("hide");
    $(".collapse.info.contentClass, .collapse.warning.contentClass").collapse("show");
  });
</script>

<tr class="collapse info contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">InfoTest&emsp;&emsp;InfoContent</td></tr>
<tr class="collapse info contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">InfoTest&emsp;&emsp;InfoContent</td></tr>
<tr class="collapse warning contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">Test&emsp;&emsp;Content</td></tr>
<tr class="collapse warning contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">Test&emsp;&emsp;Content</td></tr>
<tr class="collapse warning contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">Test&emsp;&emsp;Content</td></tr>
<tr class="collapse warning contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">Test&emsp;&emsp;Content</td></tr>
<tr class="collapse warning contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">Test&emsp;&emsp;Content</td></tr>
<tr class="collapse info contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">InfoTest&emsp;&emsp;InfoContent</td></tr>
<tr class="collapse info contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">InfoTest&emsp;&emsp;InfoContent</td></tr>

<tr id="contentID" class="collapse danger"><td colspan="2"><table class ="table"><thead class="thead-default"><tr><th>Column1</th><th>Column2</th></tr></thead>
<tr><td>Column1Content</td><td>Column2Content</tr>

</table>

Bootply 执行相同的代码:http://www.bootply.com/fv4WsHXXlm以表明当在按钮之间按下时，旧内容在隐藏之前会在屏幕上停留一段时间，我希望它同时发生。

Answer 1

已经找到解决办法。诀窍是使用 jQuery hide() 和 show() 而不是 collapse("hide") 和 collapse("show ").