切换引导表以显示和隐藏
切换引导表以显示和隐藏
提问于 2016-05-08 18:29:36
我有附加的密码。我用的是两张桌子。第一个表的最后一个单元格有一个链接，该链接应该将第二个表切换到它下面。现在，如果我使用引导程序的“折叠”类(隐藏第二个表)并单击第一个表中的链接，整个设计就会变得一团糟。另一方面，如果我删除折叠类，则设计将保持不变。任何帮助都将不胜感激。
<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 -->
回答 1
Stack Overflow用户
发布于 2016-05-08 18:52:59
很高兴设计还完好无损
您的代码很难阅读，但是概念很清楚--您希望从第一个表链接到切换第二个表的隐藏/显示。
Use 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个空格代替制表符)-节省了很多！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37103357
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号