我是Bootstrap的新手。因此，如果问题不是很明智，请原谅我。
所以我有以下代码示例：
<!DOCTYPE html>
<html>
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- this is the start of tthe main container -->
<div class="container">
<h2>Collapsible List Group</h2>
<p>Click on the collapsible panel to open and close it.</p>
<!-- each of the "panel-group" id="accordion" starts here-->
<div class="panel-group" id="accordion">
<!-- name scan1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" data-parent="#accordion">Scan1 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan1_inner_accordion">
<!-- scan1 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan1_api1" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan1_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan1 api1 ends here-->
<!-- scan1 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan1_api2" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan1_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan1 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan1 ends here-->
<!-- name scan2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2" data-parent="#accordion">Scan2 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan2_inner_accordion">
<!-- scan2 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan2_api1" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan2_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan2 api1 ends here-->
<!-- scan2 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan2_api2" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan2_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan2 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan2 ends here-->
<!-- name scan3 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3" data-parent="#accordion">Scan3 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan3_inner_accordion">
<!-- scan3 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan3_api1" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan3_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan3 api1 ends here-->
<!-- scan3 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan3_api2" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan3_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan3 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan3 ends here-->
</div>
<!-- each of the "panel-group" id="accordion" ends here-->
</div>
<!-- this is the end of tthe main container -->
</body>
</html>
现在发生了点击流：
点击＆＃34; Scan1结果扫描日期 - 此处有一些日期＆＃34;现在从可折叠的点击＆＃34; http://localhost/api/v1/getWallet＆＃34;它打开了它下面的细节。现在，如果我点击＆＃34; http://localhost/api/v1/getProfile＆＃34;以前打开的细节关闭，相关的细节现在打开了。 现在，如果我点击＆＃34; Scan2结果扫描日期 - 某些日期在这里＆＃34;然后单击“扫描1结果扫描日期 - 此处的某个日期＆＃34;”，最后打开的项目仍然可见。
我想要的是当我再次点击＆＃34; Scan1结果扫描日期 - 此处的某个日期＆＃34;那么所有内部项目都应该折叠，不像现在发生的那样，最后打开的项目仍然保持打开状态。
我该怎么做？
答案 0 :(得分：1)
当您点击外侧手风琴时，您必须折叠内手风琴。只需在脚本文件中添加以下脚本代码
即可
$("a[data-parent='#accordion'").click(function(e) {
$('.list-group-item .panel-collapse').removeClass('in');
});<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- this is the start of tthe main container -->
<div class="container">
<h2>Collapsible List Group</h2>
<p>Click on the collapsible panel to open and close it.</p>
<!-- each of the "panel-group" id="accordion" starts here-->
<div class="panel-group" id="accordion">
<!-- name scan1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" data-parent="#accordion">Scan1 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan1_inner_accordion">
<!-- scan1 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan1_api1" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan1_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan1 api1 ends here-->
<!-- scan1 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan1_api2" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan1_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan1 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan1 ends here-->
<!-- name scan2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2" data-parent="#accordion">Scan2 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan2_inner_accordion">
<!-- scan2 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan2_api1" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan2_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan2 api1 ends here-->
<!-- scan2 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan2_api2" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan2_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan2 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan2 ends here-->
<!-- name scan3 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3" data-parent="#accordion">Scan3 Results Date of Scan - Some date here</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="panel-group" id="scan3_inner_accordion">
<!-- scan3 api1 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan3_api1" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getProfile</a>
</h4>
</div>
<div id="scan3_api1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan3 api1 ends here-->
<!-- scan3 api2 starts here-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#scan3_api2" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getWallet</a>
</h4>
</div>
<div id="scan3_api2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Vuln1</li>
<li class="list-group-item">Vuln2</li>
<li class="list-group-item">Vuln3</li>
</ul>
</div>
</div>
<!-- scan3 api2 ends here-->
</div>
</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
<!-- name scan3 ends here-->
</div>
<!-- each of the "panel-group" id="accordion" ends here-->
</div>
<!-- this is the end of tthe main container -->
答案 1 :(得分：0)
您可以手动隐藏折叠的项目，如下所示。
$("a[data-parent='#accordion'").click( function(e) {
$('.panel-collapse').removeClass('in');
});