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

时间：2018-10-15 08:39:26

标签： javascript html css bootstrap-4

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

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>

我怀疑上面的代码在桌面视图下可以正常工作，但是在移动视图下则无法工作。对于下面的javascript代码，我尝试了另一种方法，但也遇到了同样的问题。

JavaScript 

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

1 个答案:

答案 0 :(得分：0)

如果我了解您想要的内容，则只需使用引导程序库即可，而无需使用任何CSS或js代码即可

<!-- 
  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

相关问题
最新问题