我有附加的代码。我在这里使用了2张桌子。第一个表的最后一个单元格有一个链接，应该切换它下面的第二个表。现在，如果我使用bootstrap＆＃34;＆＃34;崩溃＆＃34; class（隐藏第二个表）并单击第一个表中的链接，整个设计搞砸了。另一方面，如果删除折叠的类，则设计保持不变。任何帮助将不胜感激。
<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 -->
答案 0 :(得分：1)
很高兴设计仍然完好
您的代码很难阅读，但概念很明确 - 您希望第1个表格中的链接切换隐藏/显示第2个表格
使用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年里我写了很多这样的东西 - 测试后会进行编辑/更新：）
PS 你不必使用标签这么多，它浪费了左侧空间（我用2个空格代替标签） - 节省了很多！