Question

我正在使用bootstrap v3.3.7并显示手风琴。

  <?php if($post->prime==1) {?>
    // bootstrap accordions code
   <?php } ?>

  <?php foreach ($secMember as $secPay) {?>
   // bootstrap accordions code
  <?php }?>

让我们首先谈谈以上if condition。如果$post->prime==1会显示手风琴。

我们来谈一谈foreach。

我正在从数据库中获取记录，并根据记录的总数来显示手风琴。

我手风琴很好，没有问题，但是单击手风琴时我遇到了问题。我的意思是，当我单击时，它将仅关闭第一手风琴。如果我单击关闭第二个手风琴，也关闭第一个。我认为Id存在一些问题。您可以检查并解决此问题吗？

我得到的输出是

 ------------------
    first accordion //getting from if condition
    ------------------
   //Geting from foreach condition
    ------------------
    second accordion
    ------------------
    third accordion
    ------------------
      |
      |
    //display depanding upon the number of records

如果我单击第二个手风琴，那么它将关闭与第三个手风琴上的第一个手风琴。

此处是整个代码

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">

  <?php if($post->prime==1) {?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <?php echo $secPay->title;?>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <?php echo $secPay->content;?>
      </div>
    </div>
  </div>
  <?php }?>


  <?php foreach ($secMember as $secPay) {?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <?php echo $secPay->title;?>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <?php echo $secPay->content;?>
      </div>
    </div>
  </div>
  <?php }?>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

是的，最后我找到了答案。我不知道它是否正确。

我做了什么

我在foreach外部创建了一个名为$x=1的变量，在foreach内部创建了一个$x++的变量。我在两个地方更新了x。

第一个

<a role="button" data-toggle="collapse"  href="#collapseOne<?php echo $x;?>" aria-expanded="true" aria-controls="collapseOne">

第二个

<div id="collapseOne<?php echo $x;?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

，并且运行良好。请让我知道我是否在正确的道路上。我应该对此进行更多更改吗？

Bootstrap手风琴Click事件无法与动态数据一起正常使用

1 个答案: