Javascript摺疊延遲功能

我想實現在按下按鈕時用另一個替換舊的摺疊內容的功能。當我嘗試使用引導按鈕data-toggle和data-taget屬性以及使用javascript的功能時，我得到了延遲隱藏和顯示功能。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表明，舊的內容停留在屏幕它被隱藏之前，而在按鍵之間推的時候，我想它同時發生。

來源

2016-10-17 Jackstick

已找到解決方案。訣竅是使用jQuery hide()和show()而不是collapse("hide")和collapse("show")。

來源

2016-10-17 06:56:52 Jackstick

Javascript摺疊延遲功能

回答

相關問題