Bootstrap Accordion顯示點擊頂部的內容

Question

JSFiddle https://jsfiddle.net/3ah26cvq/

在JSFiddle中默認情況下HTML是活動的，它包含11個問題。 現在PHP默認情況下它已折疊，當我們點擊它時，它將打開，HTML將崩潰。

我的問題是，當我點擊PHP時，它顯示了PHP的最后一個問題。 在我的例子中，它是Focusing（顯示）第11個PHP問題，實際上它應該聚焦（顯示） PHP標題因為我們點擊了它。 我怎樣才能實現它。

與上面的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> 

Answer 1

我只是在問題不是第一個時添加一個條件， 因為父標題給出了空格-50px 。 我在<a>添加了一個假類，以幫助我們知道在滾動之前點擊的父母......等等

 $("#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> 

Answer 2

你能看到這個小提琴嗎？ 我認為這會有所幫助。

 $("#panelForPHP").click(function() { $("#accordionPHP").focus(); }); $("#panelForPHP").click(function() { $("#collapsePHP1").focus(); }); $("#panelForPHP").click(function() { $("#panelForPHP").focus(); }); $('.panel-heading').on('click', function() { $('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><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> 

我添加了scrollTop jQuery函數。 沒有其他的。