JSFiddle https://jsfiddle.net/3ah26cvq/
在 JSFiddle 中，默认情况下 HTML 处于事件状态，其中包含 11 个问题。现在 PHP 默认情况下它是折叠的，当我们点击它时，它会打开，HTML 会折叠。
我的问题是，当我点击 PHP 时，它显示了 PHP 的最后一个问题。!在我的例子中是 Focusing (showing) PHP 的第 11 个问题，实际上它应该 Focus (show) PHP title 因为我们点击了它。!我怎样才能实现它。？
与上面的JSFiddle相关
我尝试了 3 种不同的方法，但都不起作用:
$("#panelForPHP").click(function(){ $("#accordionPHP").focus(); });
$("#panelForPHP").click(function(){ $("#collapsePHP1").focus(); });
$("#panelForPHP").click(function(){ $("#panelForPHP").focus(); });
简而言之，每次我点击它应该聚焦在屏幕上，我该怎么做？
$("#panelForPHP").click(function(){ $("#accordionPHP").focus(); });
$("#panelForPHP").click(function(){ $("#collapsePHP1").focus(); });
$("#panelForPHP").click(function(){ $("#panelForPHP").focus(); });.circle {
width: auto;
height: 23px;
text-align:top;
float: right;
background: #ffff00;
color: #fff;
color: black;
padding-top: 3px;
margin-right: -15px;
margin-top: -10px;
border-bottom-left-radius: 500%;
font-size: 11px;
padding-left: 7px;
padding-right: 7px;
}
.panel_heading_bg {
background-color: #122c5f !important;
color: white !important;
}<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>
<div class="panel-group" id="accordionMain">
<?php /* HTML */ ?>
<div class="panel panel-default">
<div class="panel-heading panel_heading_bg" style="cursor:pointer" data-toggle="collapse" data-parent="#accordionMain" href="#collapseHTML">
<h4 class="panel-title "><a><span class="circle"><b>H</b></span>HTML</a> </h4>
</div>
<div id="collapseHTML" class="panel-collapse collapse in " style="cursor:pointer">
<div class="panel-body ">
<div class="panel-group" id="accordionHTML">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML1">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>1</b></span>question1</a> </h4> </div>
<div id="collapseHTML1" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer1</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML2">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question2</a> </h4> </div>
<div id="collapseHTML2" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer2</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML3">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question3</a> </h4> </div>
<div id="collapseHTML3" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer3</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML4">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question4</a> </h4> </div>
<div id="collapseHTML4" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer4</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML5">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question5</a> </h4> </div>
<div id="collapseHTML5" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer5</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML6">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question6</a> </h4> </div>
<div id="collapseHTML6" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer6</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML7">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question7</a> </h4> </div>
<div id="collapseHTML7" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer7</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML8">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question8</a> </h4> </div>
<div id="collapseHTML8" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer8</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML9">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question9</a> </h4> </div>
<div id="collapseHTML9" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer9</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML10">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question10</a> </h4> </div>
<div id="collapseHTML10" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer10</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML11">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question11</a> </h4> </div>
<div id="collapseHTML11" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer11</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php /* HTML END */ ?>
<?php /* PHP */ ?>
<div class="panel panel-default">
<div data-toggle="collapse" data-parent="#accordionMain" href="#collapsePHP" class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>P</b></span>PHP</a> </h4> </div>
<div id="collapsePHP" class="panel-collapse collapse " style="cursor:pointer">
<div class="panel-body ">
<div class="panel-group" id="accordionPHP">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP1">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>1</b></span>question1</a> </h4> </div>
<div id="collapsePHP1" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer1</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP2">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question2</a> </h4> </div>
<div id="collapsePHP2" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer2</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP3">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question3</a> </h4> </div>
<div id="collapsePHP3" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer3</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP4">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question4</a> </h4> </div>
<div id="collapsePHP4" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer4</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP5">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question5</a> </h4> </div>
<div id="collapsePHP5" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer5</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP6">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question6</a> </h4> </div>
<div id="collapsePHP6" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer6</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP7">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question7</a> </h4> </div>
<div id="collapsePHP7" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer7</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP8">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question8</a> </h4> </div>
<div id="collapsePHP8" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer8</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP9">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question9</a> </h4> </div>
<div id="collapsePHP9" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer9</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP10">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question10</a> </h4> </div>
<div id="collapsePHP10" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer10</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP11">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question11</a> </h4> </div>
<div id="collapsePHP11" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer11</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php /* PHP END */ ?>
<?php /* JAVASCRIPT */ ?>
<div class="panel panel-default">
<div data-toggle="collapse" data-parent="#accordionMain" href="#collapseJavaScript" class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>JS</b></span>JAVASCRIPT</a> </h4> </div>
<div id="collapseJavaScript" class="panel-collapse collapse " style="cursor:pointer">
<div class="panel-body ">
<div class="panel-group" id="accordionJavaScript">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionJavaScript" href="#collapseJavaScript1">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>1</b></span>question1</a> </h4> </div>
<div id="collapseJavaScript1" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer1</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionJavaScript" href="#collapseJavaScript2">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question2</a> </h4> </div>
<div id="collapseJavaScript2" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php /* JAVASCRIPT END */ ?>
<?php /* MYSQL */ ?>
<div class="panel panel-default">
<div data-toggle="collapse" data-parent="#accordionMain" href="#collapseMYSQL" class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>SQL</b></span>MYSQL</a> </h4> </div>
<div id="collapseMYSQL" class="panel-collapse collapse " style="cursor:pointer">
<div class="panel-body ">
<div class="panel-group" id="accordionMYSQL">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionMYSQL" href="#collapseMYSQL1">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>1</b></span>question1</a> </h4> </div>
<div id="collapseMYSQL1" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer1</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionMYSQL" href="#collapseMYSQL2">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question2</a> </h4> </div>
<div id="collapseMYSQL2" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php /* MYSQL END */ ?>
</div>最佳答案
我只是在问题不是第一个时添加一个条件因为得到了父标题给一个空格-50px .我在<a>里面添加了一个假类帮助我们知道滚动前点击的 parent ......等等
$("#panelForPHP").click(function() { $("#accordionPHP").focus(); });
$("#panelForPHP").click(function() { $("#collapsePHP1").focus(); });
$("#panelForPHP").click(function() { $("#panelForPHP").focus(); });
$('.panel-heading').on('click', function() {
//console.log("TEST TEST : " + $(this).find('h4 a').prop('class'));
if ($(this).find('h4 a').prop('class') === 'parents') {
//console.log("ok parent");
var target = $(this).find('h4 a').prop('class');
//console.log("target = " + target)
/* le sélecteur $(html, body) permet de corriger un bug sur chrome
et safari (webkit) */
$('html, body')
// on arrête toutes les animations en cours
.stop()
/* on fait maintenant l'animation vers le haut (scrollTop) vers
notre ancre target */
.animate({ scrollTop: $('.' + target).offset().top }, 1000);
} else {
//console.log($(this).prop('class'));
// console.log(typeof parseInt($(this).find('b').text()))
if ($(this).find('b').text() != 1 && ($(this).find('h4 a').prop('class') !== 'parents')) {
$('html,body').animate({ scrollTop: $(this).offset().top - 50 }, 800);
} else if ($(this).find('h4 a').prop('class') !== 'parents') {
$('html,body').animate({ scrollTop: $(this).offset().top }, 800);
}
}
});.circle {
width: auto;
height: 23px;
text-align:top;
float: right;
background: #ffff00;
color: #fff;
color: black;
padding-top: 3px;
margin-right: -15px;
margin-top: -10px;
border-bottom-left-radius: 500%;
font-size: 11px;
padding-left: 7px;
padding-right: 7px;
}
.panel_heading_bg {
background-color: #122c5f !important;
color: white !important;
}<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>
<div class="panel-group" id="accordionMain">
<?php /* HTML */ ?>
<div class="panel panel-default">
<div class="panel-heading panel_heading_bg" style="cursor:pointer" data-toggle="collapse" data-parent="#accordionMain" href="#collapseHTML">
<h4 class="panel-title "><a class="parents"><span class="circle"><b>HTML</b></span>HTML</a> </h4>
</div>
<div id="collapseHTML" class="panel-collapse collapse in " style="cursor:pointer">
<div class="panel-body ">
<div class="panel-group" id="accordionHTML">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML1">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>1</b></span>question1</a> </h4> </div>
<div id="collapseHTML1" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer1</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML2">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question2</a> </h4> </div>
<div id="collapseHTML2" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer2</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML3">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question3</a> </h4> </div>
<div id="collapseHTML3" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer3</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML4">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question4</a> </h4> </div>
<div id="collapseHTML4" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer4</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML5">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question5</a></h4> </div>
<div id="collapseHTML5" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer5</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML6">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question6</a></h4></div>
<div id="collapseHTML6" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer6</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML7">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question7</a></h4></div>
<div id="collapseHTML7" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer7</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML8">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question8</a></h4></div>
<div id="collapseHTML8" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer8</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML9">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question9</a></h4></div>
<div id="collapseHTML9" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer9</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML10">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question10</a></h4></div>
<div id="collapseHTML10" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer10</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapseHTML11">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question11</a></h4></div>
<div id="collapseHTML11" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer11</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div data-toggle="collapse" data-parent="#accordionMain" href="#collapsePHP" class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a class="parents"><span class="circle"><b>P</b></span>PHP</a> </h4> </div>
<div id="collapsePHP" class="panel-collapse collapse " style="cursor:pointer">
<div class="panel-body ">
<div class="panel-group" id="accordionPHP">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP1">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>1</b></span>question1</a></h4></div>
<div id="collapsePHP1" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer1</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP2">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question2</a> </h4> </div>
<div id="collapsePHP2" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer2</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP3">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question3</a> </h4> </div>
<div id="collapsePHP3" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer3</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP4">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question4</a></h4></div>
<div id="collapsePHP4" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer4</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP5">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question5</a></h4></div>
<div id="collapsePHP5" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer5</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP6">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question6</a></h4></div>
<div id="collapsePHP6" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer6</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionPHP" href="#collapsePHP7">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question7</a></h4></div>
<div id="collapsePHP7" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer7</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP8">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question8</a></h4></div>
<div id="collapsePHP8" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer8</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP9">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question9</a></h4></div>
<div id="collapsePHP9" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer9</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP10">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question10</a></h4></div>
<div id="collapsePHP10" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer10</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionHTML" href="#collapsePHP11">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question11</a> </h4> </div>
<div id="collapsePHP11" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer11</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div data-toggle="collapse" data-parent="#accordionMain" href="#collapseJavaScript" class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a class="parents"><span class="circle"><b>JS</b></span>JAVASCRIPT</a> </h4> </div>
<div id="collapseJavaScript" class="panel-collapse collapse " style="cursor:pointer">
<div class="panel-body ">
<div class="panel-group" id="accordionJavaScript">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionJavaScript" href="#collapseJavaScript1">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>1</b></span>question1</a> </h4> </div>
<div id="collapseJavaScript1" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer1</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionJavaScript" href="#collapseJavaScript2">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question2</a> </h4> </div>
<div id="collapseJavaScript2" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div data-toggle="collapse" data-parent="#accordionMain" href="#collapseMYSQL" class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a class="parents"><span class="circle"><b>SQL</b></span>MYSQL</a> </h4> </div>
<div id="collapseMYSQL" class="panel-collapse collapse " style="cursor:pointer">
<div class="panel-body ">
<div class="panel-group" id="accordionMYSQL">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionMYSQL" href="#collapseMYSQL1">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>1</b></span>question1</a> </h4> </div>
<div id="collapseMYSQL1" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer1</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordionMYSQL" href="#collapseMYSQL2">
<div class="panel-heading panel_heading_bg" style="cursor:pointer">
<h4 class="panel-title "><a><span class="circle"><b>2</b></span>question2</a> </h4> </div>
<div id="collapseMYSQL2" class="panel-collapse collapse '+collap+' " style="cursor:pointer">
<div class="panel-body ">answer2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>关于javascript - Bootstrap Accordion 显示点击顶部的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46591229/