logo标签列表

Bootstrap手风琴展示被点击的顶部内容

javascripthtmlcsstwitter-bootstrapaccordion
3

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

在 JSFiddle 中，默认情况下 HTML 是活动的，其中包含 11 个问题。现在 PHP 默认是折叠的，在我们单击它时，它将打开，同时 HTML 将折叠。

我的问题是，当我单击 PHP 时，它会显示 PHP 的最后一个问题！在我的情况下，它是 PHP 的第 11 个问题，实际上应该聚焦（显示）PHP标题，因为我们点击了它！我该如何实现？

与上述 JSFiddle 相关

我尝试了三种不同的方法，但都没有起作用：

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

1
这不是问题，您使用了Bootstrap手风琴，这是默认功能。在这种情况下，您可以使用Bootstrap折叠组件。当您单击PHP时，手动折叠其他选项卡。 - Satheesh Kumar
1
问题出在手风琴标题焦点上，你需要使用 scrollTop 来添加行为。 - bhansa
你所说的“focus”不太清楚。我看了那个fiddle，它的工作方式基本上是正确的。你能否详细说明一下，@asif？ - ABGR
@asif，第一个问题和顶部标题项之间有一个50px的空间，您需要对此值进行条件判断，以便在滚动时获得其他问题的正确属性。 - user8556290
2个回答
7

当问题不是第一个时，我添加了一个条件因为有父标题在前面加上一个空格-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>

当我们点击 PHP 时，它应该滚动到 PHP 标题或第一个 PHP 问题，但现在它停留在 PHP 问题 10、11。我希望你能理解我的问题。 - asif
2
@asif 我在这段代码中进行了一些法语调整 ;) https://codepen.io/headmax/pen/bYNrjB - user8556290
1
你能看到这个fiddle吗？我认为它会有所帮助。 

$("#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函数。没有其他内容。

点击 PHP 后有一些改进，但仍存在问题，现在它正在关注 php 问题 10、11。@kumar - asif
是的，它正常工作。你可以在可折叠部分末尾添加更多内容，然后你就会看到。这是 fiddle 链接 https://jsfiddle.net/3ah26cvq/5/因为如果下面没有足够的空白空间，它就无法回到顶部。 - Ram kumar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接