Question

我正在使用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部分有这个问题。

提前谢谢。

Answer 1

尝试从var my = new MyModel { Recurrence = new RecurrenceModel { String.Format("Weekly{0}", DateTime.Today.DayOfWeek.ToString()) = true } };元素中删除in类。打开扩展器面板时，Bootstrap会自动添加此项 - 默认设置此类会导致每个面板显示为打开状态。

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

PHP：

1 个答案: