实际上我只需要在此代码中的按钮切换关闭任何其他数据目标div，这些div可能在单击按钮时打开。
我试过搞乱手风琴功能等等，代码看起来很好没用。我在这方面非常陌生，并且大部分时间都在匆匆忙忙地走到我经过反复试验的角度。
因此，如果您运行代码，您将看到许多按钮。当我点击这些按钮时，我只想要他们调用的数据显示在它们上面。如果您知道要调用哪些内容以突出显示单击的按钮并在该数据可见的情况下保持突出显示，则可以获得奖励。我会接受适当的切换。
这似乎是一个非常基本的问题，我已经搜索了很多，但我找不到任何远远超出我的能力水平或真正相关的东西。我一直在搜索“切换数据 - 目标多个按钮”和这样的组合。如果您有解决办法，请告诉我。
谢谢！ //欢呼声
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="intro" class="intro">
<div class="text-content">
{{ page.basic.content }}
</div>
<div class="panel-group" id="accordion">
<div id="demo" class="panel-collapse collapse">
<table>
<tr>
<th>
<td style="panel-collapse collapse">
<div class="panel-body">
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/ally">Become an Ally</a></p>
</div>
</div>
<div id="demo1" class="panel-collapse collapse">
<table>
<tr>
<th>
<td style="text-align:left">
<div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of the annual review</p>
<p>-sticker pack</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/advocate">Become an Advocate</a></p>
</div>
</div>
<div id="demo2" class="panel-collapse collapse">
<table>
<tr>
<th>
<td style="text-align:left">
<div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
<p>-sticker pack</p>
<p>-t shirt</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/defender">Become a Defender</a></p>
</div>
<div id="demo3" class="panel-collapse collapse">
<table>
<tr>
<th>
<td style="text-align:left">
<div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
<p>-sticker pack</p>
<p>-t shirt</p>
<p>-cofee mug or tote bag</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/guardian">Become a Guardian</a></p>
</div>
<div id="demo4" class="panel-collapse collapse">
<table>
<tr>
<th>
<td style="text-align:left">
<div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
<p>-sticker pack</p>
<p>-t shirt</p>
<p>-cofee mug or tote bag</p>
<p>-personal liason at CJFE</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/campaigner">Become a Campaigner</a></p>
</div>
<div id="demo5" class="panel-collapse collapse in">
<table>
<tr>
<th>
<td style="text-align:left">
<div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
<p>-sticker pack</p>
<p>-t shirt</p>
<p>-cofee mug or tote bag</p>
<p>-personal liason at CJFE</p>
<p>-VIP invitation to annual gala</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/champion">Become a Champion</a></p>
</div>
<button type="button" class="button" data-toggle="collapse" href="#demo5" data-target="#demo5" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$99.99/month - CHAMPION</h3></button>
<button type="button" class="button" data-toggle="collapse" href="#demo4" data-target="#demo4" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$59.99/month - CAMPAIGNER</h3></button>
<button type="button" class="button" data-toggle="collapse" href="#demo3" data-target="#demo3" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$29.99/month - GUARDIAN</h3></button>
<button type="button" class="button" data-toggle="collapse" href="#demo2" data-target="#demo2" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$14.99/month - DEFENDER - <font color="red">BEST VALUE</font> </h3></button>
<button type="button" class="button" data-toggle="collapse" href="#demo1" data-target="#demo1" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$9.99/month - ADVOCATE</h3></button>
<button type="button" class="button" data-toggle="collapse" href="#demo" data-target="#demo" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$5.00/year - ALLY</h3></button>
</body>
答案 0 :(得分：0)
也许您会想要更改代码以使其更容易，但如果您想让它按照自己的方式运行，则需要隐藏所有div，然后打开您的代码。
只需将此添加到标题中：
function hideall() {
$('.panel-collapse').each(function() {
$(this).collapse('hide');
});
}
在所有div上放一个onclick lister：
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo5" data-target="#demo5" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$99.99/month - CHAMPION</h3></button>
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo4" data-target="#demo4" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$59.99/month - CAMPAIGNER</h3></button>
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo3" data-target="#demo3" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$29.99/month - GUARDIAN</h3></button>
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo2" data-target="#demo2" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$14.99/month - DEFENDER - <font color="red">BEST VALUE</font> </h3></button>
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo1" data-target="#demo1" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$9.99/month - ADVOCATE</h3></button>
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo" data-target="#demo" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$5.00/year - ALLY</h3></button>
这应该可以解决问题。
见这里：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript">
function hideall() {
$('.panel-collapse').each(function() {
$(this).collapse('hide');
});
}
</script>
</head>
<body>
<div id="intro" class="intro">
<div class="text-content">
{{ page.basic.content }}
</div>
<div class="panel-group" id="accordion">
<div id="demo" class="panel-collapse collapse">
<table>
<tr>
<th>
<td style="panel-collapse collapse">
<div class="panel-body">
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/ally">Become an Ally</a></p>
</div>
</div>
<div id="demo1" class="panel-collapse collapse">
<table>
<tr>
<th>
<td style="text-align:left">
<div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of the annual review</p>
<p>-sticker pack</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/advocate">Become an Advocate</a></p>
</div>
</div>
<div id="demo2" class="panel-collapse collapse">
<table>
<tr>
<th>
<td style="text-align:left">
<div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
<p>-sticker pack</p>
<p>-t shirt</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/defender">Become a Defender</a></p>
</div>
<div id="demo3" class="panel-collapse collapse">
<table>
<tr>
<th>
<td style="text-align:left">
<div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
<p>-sticker pack</p>
<p>-t shirt</p>
<p>-cofee mug or tote bag</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/guardian">Become a Guardian</a></p>
</div>
<div id="demo4" class="panel-collapse collapse">
<table>
<tr>
<th>
<td style="text-align:left">
<div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
<p>-sticker pack</p>
<p>-t shirt</p>
<p>-cofee mug or tote bag</p>
<p>-personal liason at CJFE</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/campaigner">Become a Campaigner</a></p>
</div>
<div id="demo5" class="panel-collapse collapse in">
<table>
<tr>
<th>
<td style="text-align:left">
<div>
<p>-invitation to AGM</p>
<p>-invitations to ally-only events</p>
<p>-monthly electronic newsletter</p>
<p>-copy of annual review</p>
<p>-sticker pack</p>
<p>-t shirt</p>
<p>-cofee mug or tote bag</p>
<p>-personal liason at CJFE</p>
<p>-VIP invitation to annual gala</p>
</div>
</td>
<th>
<img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px">
</th>
</tr>
</table>
<p><a class="button" href="/champion">Become a Champion</a></p>
</div>
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo5" data-target="#demo5" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$99.99/month - CHAMPION</h3></button>
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo4" data-target="#demo4" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$59.99/month - CAMPAIGNER</h3></button>
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo3" data-target="#demo3" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$29.99/month - GUARDIAN</h3></button>
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo2" data-target="#demo2" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$14.99/month - DEFENDER - <font color="red">BEST VALUE</font> </h3></button>
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo1" data-target="#demo1" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$9.99/month - ADVOCATE</h3></button>
<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo" data-target="#demo" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$5.00/year - ALLY</h3></button>
</body>
</html>
此致