我对 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>现在这是发生的点击流程:
click on "Scan1 Results Date of Scan - Some date here" now from the collapsible click on "http://localhost/api/v1/getWallet" and it opens up details under it. Now if I click on "http://localhost/api/v1/getProfile" the previously opened details close and relevant one now opens up. Now if I click on "Scan2 Results Date of Scan - Some date here" and then click back on "Scan1 Results Date of Scan - Some date here", the last opened item is still visible.
我想要的是，当我再次单击“扫描1结果扫描日期 - 这里的某个日期”时，所有内部项目都应该折叠，与现在发生的情况不同，最后打开的项目仍然保持打开状态。
我该怎么做？
最佳答案
当您单击外部 Accordion 时，必须折叠内部 Accordion 。只需在脚本文件中添加以下脚本代码
$("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 -->关于javascript - 嵌套的 Accordion 也折叠了其他组的所有内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48094174/