代码之家  ›  专栏  ›  技术社区  ›  asif

引导手风琴显示点击顶部的内容

accordion twitter-bootstrap css html javascript
  •  3
  • asif  · 技术社区  · 8 年前

    https://jsfiddle.net/3ah26cvq/

    在JSFIDLE中,默认情况下HTML是活动的,它由11个问题组成。现在PHP默认是折叠的,当我们点击它时,它会打开,HTML会折叠。

    我的问题是,当我点击PHP时,它显示了PHP的最后一个问题。!就我而言是这样 第11个PHP问题,实际上应该是 焦点(显示) PHP标题,因为我们点击了它。!我怎样才能做到。?

    与上述JSFIDLE相关

    我尝试了三种不同的方法,但都不奏效: 

    $("#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>
    2 回复  |  直到 8 年前
        1
  •  7
  •   Minal Chauhan Adriano    8 年前

    当问题不是第一个时,我只是添加了一个条件 因为我得到了父母的头衔 给一个空间 -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>
        2
  •  1
  •   Minal Chauhan Adriano    8 年前

    你能看到这个吗 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函数。没有别的了。

    推荐文章
    xajetin  ·  导航不更改滚动上的颜色
    3 年前
    Noor ul ain Ibrahim  ·  如何在一行中制作两个大小相同的按钮?
    4 年前
    Bryan Santos  ·  固定表头与引导
    4 年前
    Nicolas Berthier  ·  Bootstrap 5基于内容的包装
    4 年前
    tym  ·  根据用户偏好显示字段
    4 年前
    Sheryar Khan  ·  如何仅使用html、css、bootstrap、javascript/jquery创建html页面?
    4 年前
    Pavel  ·  当验证DIV可见时,引导网格会移动
    8 年前
    Sam  ·  在标题中嵌入Bootstrap 3导航栏
    8 年前
    Alexander David  ·  折叠卡打开,然后立即再次关闭
    8 年前
    Sandeep Bhardwaj  ·  div的一致行为,与设备分辨率无关
    8 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号