我有附加代码。我在这里使用 2 个表。第一个表格的最后一个单元格有一个链接，可以切换它下面的第二个表格。现在，如果我使用 Bootstrap 的“折叠”类(隐藏第二个表)并单击第一个表中的链接，整个设计就会变得一团糟。另一方面，如果我删除折叠的类，设计将保持不变。任何帮助将不胜感激。
<div id="market-golden-scroll" class="mCustomScrollbar" data-mcs-theme="rounded-dark">
<table class="table table-responsive table-hover">
<tr>
<td>
<div class="row">
<div class="col-sm-1">
<a href="#" target="_blank"><img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"></a>
</div>
<div class="col-sm-7 padd-top-5">
<a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a>
</div>
<div class="col-sm-4 text-right padd-top-5">
<button class="btn btn-success btn-sm"> Add Affiliate </button>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="col-sm-1">
<a href="#">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width:38px;height:38px;">
<defs>
<pattern id="img5" patternContentUnits="objectBoundingBox" width="100%" height="100%">
<image xlink:href="images/my-store.gif" preserveAspectRatio="none" width="1" height="1">
</pattern>
</defs>
<polygon points="50 1 92 25 92 75 50 99 8 75 8 25" fill="url(#img5)" style="stroke: #999DA3;">
</svg>
</a>
</div>
<div class="col-sm-7 padd-top-5">
<a class="lnk-affiliates" href="#" target="_blank">Steve Austin </a>
</div>
<div class="col-sm-4 text-right padd-top-5">
<button class="btn btn-success btn-sm"> View Profile</button>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="col-sm-1">
<a href="#" target="_blank"><img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"></a>
</div>
<div class="col-sm-7 padd-top-5">
<a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a>
</div>
<div class="col-sm-4 text-right padd-top-5">
<button class="btn btn-success btn-sm"> Add Affiliate </button>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="col-sm-1">
<a href="#">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width:38px;height:38px;">
<defs>
<pattern id="img4" patternContentUnits="objectBoundingBox" width="100%" height="100%">
<image xlink:href="images/my-store.gif" preserveAspectRatio="none" width="1" height="1">
</pattern>
</defs>
<polygon points="50 1 92 25 92 75 50 99 8 75 8 25" fill="url(#img4)" style="stroke: #999DA3;">
</svg>
</a>
</div>
<div class="col-sm-7 padd-top-5">
<a class="lnk-affiliates" href="#" target="_blank">Andalus </a>
</div>
<div class="col-sm-4 text-right padd-top-5">
<button class="btn btn-success btn-sm"> View Profile</button>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="col-sm-1">
<a href="#" target="_blank"><img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"></a>
</div>
<div class="col-sm-7 padd-top-5">
<a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a>
</div>
<div class="col-sm-4 text-right padd-top-5">
<button class="btn btn-success btn-sm"> Add Affiliate</button>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<!-- load more likers -->
<div class="col-sm-12 padd-top-5 text-right">
<a data-toggle="collapse" data-target="#tabLoadMoreLikers" class="lnk-affiliates" href="#">Load More </a>
</div>
</div>
</td>
</tr>
</table>
<table id="tabLoadMoreLikers" class="table table-responsive table-hover collapse">
<tr>
<td>
<div class="row">
<div class="col-sm-1">
<a href="#" target="_blank"><img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"></a>
</div>
<div class="col-sm-7 padd-top-5">
<a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a>
</div>
<div class="col-sm-4 text-right padd-top-5">
<button class="btn btn-success btn-sm"> Add Affiliate </button>
</div>
</div>
</td>
</tr>
</table>
</div><!-- market-golden scroll --> 最佳答案
很高兴设计仍然完好无损
您的代码难以阅读，但概念很清楚 - 您希望第一个表中的链接切换第二个表的隐藏/显示
使用 jQuery - Bootstrap 无论如何都需要它
首先我们需要hide显示类 - 将其放入 <head></head>
<style>.hide { display: none; }</style>
对于第一个表中的链接 - 删除 data-toggle并添加 href ..
<a href="javascript:toggleDisplay('tabLoadMoreLikers');"> Link </a>
然后在<html>之后添加函数
... code before ...
</html>
<script>
function toggleDisplay(id) {
if( $('#'+id).hasClass('show') ) {
$('#'+id).removeClass('show');
$('#'+id).addClass('hide');
} else {
$('#'+id).removeClass('hide');
$('#'+id).addClass('show');
}
}
</script>
我没有 show 的样式类，因为显示可以是block或 inline在这种情况下 table - 所以我将其保留为默认值
这个还没有测试，但在过去的 2-3 年里我写了很多这样的东西 - 将在测试后编辑/更新 :)
P.S.您不必使用太多制表符，它会浪费左侧空间(我使用 2 个空格代替制表符)- 节省很多!
关于html - 切换 Bootstrap 表以显示和隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37103357/