你知道引导程序中的这种效果吗？ 当您单击组1切换时，当您单击组2，组1折叠时，以下是示例：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#title1">Title 1</a>
</h4>
</div>
<div id="title1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel-group" id="accordion">
<div class="panel">
<a data-toggle="collapse" href="#title1-1">sub-title</a>
</div>
<div id="title1-1" class="panel-collapse collapse in">
<div class="panel-body">
<a href="#">Content</a><br>
<a href="#">Content</a><br>
<a href="#">Content</a><br>
<a href="#">Content</a>
</div>
</div>
<div class="panel">
<a data-toggle="collapse" href="#title1-2">sub-title 2</a>
</div>
<div id="title1-2" class="collapse">
<div class="panel-body">
<a href="#">Content</a><br>
<a href="#">Content</a><br>
<a href="#">Content</a><br>
<a href="#">Content</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#title2">Title 2</a>
</h4>
</div>
<div id="title2" class="panel-collapse collapse">
<div class="panel-body">
<!--- STUFF --->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#title3">Title 3</a>
</h4>
</div>
<div id="title3" class="panel-collapse collapse">
<div class="panel-body">
<!--- STUFF --->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
好的很酷，我希望内部列表在＆＃34; Title 1＆＃34;与外面的这3个列表具有相同的效果！
它不起作用我认为因为课程和Id不正确？
答案 0 :(得分：1)
我认为这就是你想要的。仔细观察我将手风琴嵌入手风琴的方式。你是关于id和课程的全部内容。
工作示例
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.panel{
border-color:#EEEEEE !important;
width: 150px;
}
.panel > .panel-heading {
background-color: greenyellow;
color: white;
height: 40px;
text-align: center;
border-color:black !important;
font-size: 20px;
}
.panel> .panel-body{
text-align: center;
font-family: "Comic Sans MS";
font-size: 35px;
}
.glyphicon{
font-size: 20px !important;
text-align: left !important;
}
</style>
</head>
<body>
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#title1">Title 1</a>
</h4>
</div>
<div id="title1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel-group" id="accordion1">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#inside1">Title 1</a>
</h4>
</div>
<div id="inside1" class="panel-collapse collapse in">
<div class="panel-body">
<a href="#">Content</a><br>
<a href="#">Content</a><br>
<a href="#">Content</a><br>
<a href="#">Content</a>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#inside2">Title 1</a>
</h4>
</div>
<div id="inside2" class="panel-collapse collapse">
<div class="panel-body">
<a href="#">Content</a><br>
<a href="#">Content</a><br>
<a href="#">Content</a><br>
<a href="#">Content</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#title2">Title 2</a>
</h4>
</div>
<div id="title2" class="panel-collapse collapse">
<div class="panel-body">
<!--- STUFF -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#title3">Title 3</a>
</h4>
</div>
<div id="title3" class="panel-collapse collapse">
<div class="panel-body">
<!--- STUFF -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>