我对bootstraps相当新，我正在尝试为按钮添加一个onclick事件，这只会打开我的主引导面板。
这是我的引导程序面板所在的HTML代码部分;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentThree"></p>
</div>
</div>
</div>
<!-- Sub panel 4 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFour"></p>
</div>
</div>
</div>
<!-- Sub panel 5 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
至于字形，我尝试过这段代码，但它只在你打开/关闭同一个子面板时切换变化，那么当你打开不同的子面板时，字形图有什么简单的方法可以改变吗？
$(document).ready(function () {
$('[data-toggle="collapse"]').click(function () {
$(this).find('span').toggleClass('glyphicon-chevron-
down').toggleClass('glyphicon-chevron-up');
});
});
感谢任何帮助。
答案 0 :(得分：1)
$('a[data-toggle="collapse"]').click(function(){
if( $(this).closest('div.panel-heading').next('div.collapse').hasClass('in')){
$(this).next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}else{
$('a[data-toggle="collapse"]').next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
$(this).next('span').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
}
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentThree"></p>
</div>
</div>
</div>
<!-- Sub panel 4 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFour"></p>
</div>
</div>
</div>
<!-- Sub panel 5 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
跨度不在a内，因此您需要导航到父级并从那里找到。我在您的代码行中添加了parent()。我还添加了重置其他标题面板的逻辑
答案 1 :(得分：1)
您可以使用解决方案https://jsfiddle.net/mc3z6ad3/2/
$('a[data-toggle="collapse"]').click(function(){
if( $(this).closest('div.panel-heading').next('div.collapse').hasClass('in')){
$(this).next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}else{
$('a[data-toggle="collapse"]').next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
$(this).next('span').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
}
});<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentThree"></p>
</div>
</div>
</div>
<!-- Sub panel 4 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFour"></p>
</div>
</div>
</div>
<!-- Sub panel 5 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>