Javascript 为什么Bootstrap手风琴展示了所有可折叠的盒子？

我用BOOTSTRAP手风琴在我们的网站上展示受邀的演讲者

我在WordPress4.8中

额外使用的代码如下所示：

function toggleChevron(e) {
      var theAccordion = $('#accordion');
      $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-minus glyphicon-plus');
        //$('#accordion .panel-heading').css('background-color', 'green');
                theAccordion.find('.panel-heading').removeClass('highlight');
                $(e.target).prev('.panel-heading').addClass('highlight');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

我从php获取面板标题和主体：

PHP: 当我运行上述代码时，除以下问题外，所有工作正常：

刷新页面时，将打开所有可折叠正文

连续双击任何面板标题时，所有标题都会正常设置

有什么问题

我不希望任何机构应该打开时，页面刷新。仅当用户单击其中一个面板标题时，才应显示相应的面板主体，其余部分应保持不可见

PS：我已经在页脚添加了所有javascript文件

这是个问题吗

这是一个运行错误吗

请澄清这一点。在被邀请的演讲者部分有这个问题

提前感谢。

尝试从面板折叠元素中删除类内元素。在打开扩展器面板时，引导会自动添加此选项-默认情况下设置此类会导致每个面板显示为打开状态。

在中删除类可以解决此问题

<div class="clearfix panel-group" id="accordion" >      
          <?php

        global $wpdb;
        $result = $wpdb->get_results( "SELECT * FROM  `Invited_Speakers_auto`;");
        foreach ( $result as $print )   { ?>
                           <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#<?php echo $print->Last_Name;?>">   <?php echo $print->First_Name;?> <?php echo $print->Last_Name;?>, <?php echo $print->Institute_Address;?>
        </a> </h4>
      </div>
      <div id="<?php echo $print->Last_Name;?>" class="panel-collapse collapse in">
        <div class="panel-body">
<img  style="border-radius: 10%; padding: 10px; float: left;" src="<?php echo $print->Image_link;?>" alt="" width="20%" align="middle" />

<table style="width:79%;float: right;">
<tbody>

<td ><?php echo $print->Designation;?>  </td>
</tr>
<tr>
<td style="display:block; width:50%;"><?php echo $print->Department_Address;?></td>
</tr>

<tr>
<td> Email Id: <?php echo $print->Email_Id;?> </td>
</tr>
</tbody>
</table>

<table>
<tbody>
<tr>
<td >Research Interests</td>
<td>:</td>
<td> <?php echo $print->Research_Interests;?></td>
</tr>
<tr>
<td>
Achievements
</td>
<td> : </td>
<td> <?php echo $print->Acheivements;?> 
<button style="float:right;"><a style="color: white;" href="Home_page_Link" target="_blank" rel="noopener"> More Info </a> </button>
</td>
</tr>
</tbody>
</table>

                  </div>
      </div>
    </div>

            <?php } ?>

  </div>