Bootstrap 手风琴一次打开一个

Question

我已经创建了一个手风琴并且它在一个循环中，但我希望一次只打开一个手风琴而不是多个手风琴。我使用了引导程序的data parent 属性，但它不起作用。任何形式的帮助将不胜感激。 我希望一次只打开一架手风琴。如何实现它。我认为我遇到了这个问题，因为每个循环。有什么办法解决吗？

这是我的代码：

<?php if(!empty($tickets)) : ?> 

            <?php foreach($tickets as $ticket) : ?>



        <div class="panel-group-custom" id="#panels">



            <div class="panel panel-default mb-0 no-border">

                <div class="panel-heading.panel-heading-custom" >
                <h4 class="panel-title">
                  <div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title">

                      <div class="row">

                          <div class="overflow-hidden">

                              <div class="col-md-2">
                                  <span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span>
                              </div>
                              <div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div>
                              <div class="col-md-2">
                                  <span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i> 
                        <?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>       
                        <?php echo date_format($bdate,"d-M-Y") ?>         


                                  </span>
                              </div>
                              <div class="col-md-1">
                                  <span class="accordion-down">
                                    <i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i>
                                </span>
                              </div>

                          </div>

                      </div>

                  </div>

                </h4>
              </div>


              <div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="hidden-overflow ticket">
                             <div class="full-width hidden-overflow ticket-chat">
                                 <p class="color-4 ticket-content"> 
                                    <?php echo $ticket['SupportTicket']['description'] ?>                                 
                                 </p>
                                 <?php if($ticket['SupportTicket']['status']>1) : ?>


                                 <p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>                 
                                    <?php echo $ticket['SupportTicket']['resolution_text']; ?>
                                     <span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i>
                                            <?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>       
                                            <?php echo date_format($bdate,"d-M-Y") ?>         
                                      </span></span>
                                  </p>
                                  <?php endif ?>
                             </div>
                             <div class="full-width hidden-overflow mt-5">

                            <!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>-->
                             </div>
                         </div>
                  </div>
              </div>

            </div>

        </div>


            <?php endforeach ?>


        <?php else : ?>
No Records

    <?php endif ?>

Answer 1

尝试将您的 #panels div 放在 foreach 循环之外 - 这样它们都在同一个组中。

另外，您的#panels div 的 ID 中不应有“#”号。

<?php if(!empty($tickets)) : ?> 
    <div class="panel-group-custom" id="panels"><!-- Remove the '#' from here. -->
        <?php foreach($tickets as $ticket) : ?>
        <div class="panel panel-default mb-0 no-border">
            <div class="panel-heading panel-heading-custom" ><!-- and remove the . from here. -->
            <h4 class="panel-title">
              <div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title">
                  <div class="row">
                      <div class="overflow-hidden">
                          <div class="col-md-2">
                              <span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span>
                          </div>
                          <div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div>
                          <div class="col-md-2">
                              <span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i> 
                                  <?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>       
                                  <?php echo date_format($bdate,"d-M-Y") ?>         
                              </span>
                          </div>
                          <div class="col-md-1">
                              <span class="accordion-down">
                                <i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i>
                            </span>
                          </div>
                      </div>
                  </div>
              </div>
            </h4>
          </div>
          <div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="hidden-overflow ticket">
                         <div class="full-width hidden-overflow ticket-chat">
                             <p class="color-4 ticket-content"> 
                                <?php echo $ticket['SupportTicket']['description'] ?>                                 
                             </p>
                             <?php if($ticket['SupportTicket']['status']>1) : ?>
                             <p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>                 
                                <?php echo $ticket['SupportTicket']['resolution_text']; ?>
                                 <span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i>
                                        <?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>       
                                        <?php echo date_format($bdate,"d-M-Y") ?>         
                                  </span></span>
                              </p>
                              <?php endif ?>
                         </div>
                         <div class="full-width hidden-overflow mt-5">
                        <!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>-->
                         </div>
                     </div>
                 </div>
             </div>
        </div>
        <?php endforeach ?>
    </div><!-- end #panels (moved to after the foreach) -->
<?php else : ?>
    No Records
<?php endif ?>

这里是去掉 PHP 的工作版本：https://jsfiddle.net/ytcw2sot/