У меня есть таблица, реагирующая на загрузку. В таблице внутри нажмите кнопку, чтобы развернуть и свернуть определенный 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
function showHideDiv(id)
{
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}