javascript - Bootstrap 响应表单击以展开 div 不起作用

Question

我有一个 Bootstrap 响应表。表内的按钮单击展开和折叠特定的 div。在桌面 View 中它工作正常但移动 View 它不工作。

CSS

.expandClass[aria-expanded=true] .fa-chevron-circle-right {
display: none;
}
.expandClass[aria-expanded=false] .fa-chevron-circle-down  {
display: none;
}

html

<table id="respTableId" class="table table-striped table-bordered table-responsive"  
style="width: 100%;">
<thead>
<tr>
<th style="width:50%;">Column 1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tr>
<td>data1</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId1" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId1">
Test Data 1
</div>
</td>

<td>data2</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId2" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId2">
Test Data 2
</div>
</td>

<td>data3</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId3" role="button" 
aria-expanded="false" aria-controls="collapseId3">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId3">
Test Data 3
</div>
</td>
</tr>
</table>
<table id="respTableId" class="table table-striped table-bordered table-responsive"  
style="width: 100%;">
<thead>
<tr>
<th style="width:50%;">Column 1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tr>
<td>data1</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId1" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId1">
Test Data 1
</div>
</td>

<td>data2</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId2" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId2">
Test Data 2
</div>
</td>

<td>data3</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId3" role="button" 
aria-expanded="false" aria-controls="collapseId3">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId3">
Test Data 3
</div>
</td>
</tr>
</table>

我怀疑上面的代码在桌面 View 中工作正常。但在移动 View 中它不起作用。我为下面的 javascript 代码尝试了另一种方法，但也面临同样的问题。

Javascript

function showHideDiv(id)
{
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

Answer 1

如果我明白你想要什么，它可以使用任何 css 或 js 代码，只需使用 Bootstrap 库

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <table id="respTableId" class="table table-striped table-bordered table-responsive"  
style="width: 100%;">
<thead>
<tr>
<th style="width:50%;">Column 1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tr>
<td>data1</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId1" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId1">
Test Data 1
</div>
</td>

<td>data2</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId2" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId2">
Test Data 2
</div>
</td>

<td>data3</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId3" role="button" 
aria-expanded="false" aria-controls="collapseId3">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId3">
Test Data 3
</div>
</td>
</tr>
</table>
<table id="respTableId" class="table table-striped table-bordered table-responsive"  
style="width: 100%;">
<thead>
<tr>
<th style="width:50%;">Column 1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tr>
<td>data1</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId1" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId1">
Test Data 1
</div>
</td>

<td>data2</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId2" role="button" 
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId2">
Test Data 2
</div>
</td>

<td>data3</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId3" role="button" 
aria-expanded="false" aria-controls="collapseId3">
Click to View / Hide 
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa  fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId3">
Test Data 3
</div>
</td>
</tr>
</table>
    </div>
</div>  

这是一个现场演示:jsfiddle