为什么 Bootstrap Accordion 显示所有可折叠的盒子？答案

【问题标题】：Why Bootstrap Accordion is showing all the collapsible boxes?为什么 Bootstrap Accordion 显示所有可折叠的盒子？
【发布时间】：2017-12-17 10:20:31
【问题描述】：

我正在使用 BOOTSTRAP ACCORDIAN 在我们的website 中展示受邀演讲者。

我在 Wordpress 4.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：

<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>

当我运行上述代码时，除了以下问题外，一切正常：

页面刷新时所有可折叠正文都打开。
连续双击任何面板标题都正常安顿下来。

有什么问题？

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

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

有问题吗？？

是运行错误吗？

请澄清这一点。 Click here to visit the page.在那个Invited Speaker部分有这个问题。

提前谢谢你。

【问题讨论】：

标签： javascript php jquery css twitter-bootstrap-3

【解决方案1】：

尝试从panel-collapse 元素中删除in 类。 Bootstrap 在打开扩展面板时会自动添加这个 - 默认情况下设置此类会导致每个面板显示为打开。

【讨论】：

删除类 in 应该可以解决问题