0
ボタンを押したときに古い折りたたみコンテンツを別のものに置き換える機能を実現したいと思います。私がブートストラップボタン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  InfoContent</td></tr>
<tr class="collapse info contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">InfoTest  InfoContent</td></tr>
<tr class="collapse warning contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">Test  Content</td></tr>
<tr class="collapse warning contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">Test  Content</td></tr>
<tr class="collapse warning contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">Test  Content</td></tr>
<tr class="collapse warning contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">Test  Content</td></tr>
<tr class="collapse warning contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">Test  Content</td></tr>
<tr class="collapse info contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">InfoTest  InfoContent</td></tr>
<tr class="collapse info contentClass"><td colspan="2" style="padding: 0px; padding-left: 5px">InfoTest  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それは隠される前にしばらくの間、ボタンの間、画面上の古いコンテンツ滞在を押すと、私はそれを希望することを示すために同時に起こる。