Bootstrap 手风琴 - 用 css 折叠并没有按照我想要的方式扩展答案

【问题标题】：Bootstrap accordion - Collapse with css are not expanding the way I wantedBootstrap 手风琴 - 用 css 折叠并没有按照我想要的方式扩展
【发布时间】：2022-01-25 07:35:59
【问题描述】：

我试图让这个 Collapsibles 工作无济于事，我不确定我做错了什么，如果任何？我怀疑我的 PHP，但它工作正常我猜当它加载正确的文本时数据库？任何帮助将不胜感激。请参阅随附的屏幕截图：当我单击展开 Post#1 时，所有其他帖子也会展开，我想在一个帖子处于活动状态时隐藏所有帖子..这对我不起作用。

[这是我的 JSfiddle][2]

【问题讨论】：

jsfiddle.net/alachgar/324ycoh9/4

标签： php html css bootstrap-4

【解决方案1】：

为每个块分配一个唯一的 ID（注意 $key）

<?php
     $posts = array(
      array(
        'title' => 'title1', 
        'text' => 'text1'
        ),
      array(
        'title' => 'title2', 
        'text' => 'text2'
        ),
      array(
        'title' => 'title3', 
        'text' => 'text3'
        )
      );
    ?>
    
    <html>

    <head>
    <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div id="accordion" class="myaccordion">
    <?php
        foreach($posts as $key=>$element){
    ?>
      <div class="card">
        <div class="card-header" id="heading<?=$key?>">
          <h2 class="mb-0">
            <button class="d-flex align-items-center justify-content-between btn btn-link" data-toggle="collapse" data-target="#collapse<?=$key?>" aria-expanded="true" aria-controls="collapse<?=$key?>">
              <?php print $element['title']; ?>
              <span class="fa-stack fa-sm">
                <i class="fas fa-circle fa-stack-2x"></i>
                <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
              </span>
            </button>
          </h2>
        </div>
        <div id="collapse<?=$key?>" class="collapse" aria-labelledby="heading<?=$key?>" data-parent="#accordion">
          <div class="card-body">
            <?php print $element['text']; ?>
          </div>
        </div>
      </div>
    </div>
    <?php
        }
    ?>
    </body>

</html>

【讨论】：

不幸的是，这不起作用，获取帖子已经发生，我遇到的问题是，当我单击 (-) 或 (+) 折叠时，所有其他元素都在折叠。谢谢。
有人看这个来指导我采用不同的方法吗？

【解决方案2】：

对于那些想知道我是如何解决这个问题的人来说，这是我最终得到的：

<body>
                <div id="accordion" class="myaccordion">
                <?php if(!empty($eventInfo) && count($eventInfo)>0)
                { 
                foreach($eventInfo as $key=>$element) 
                {
                ?>  
                    <div class="card">      
                        <div class="card-header" id="heading<?php print $element['id'];?>">         
                            <h2 class="mb-0">               
                                <button class="d-flex align-items-center justify-content-between btn btn-link" data-toggle="collapse" data-target="#collapse<?php print $element['id'];?>" aria-expanded="true" aria-controls="collapse<?php print $element['id'];?>">
                                <?php print $element['title']; ?>
                                    <span  class="fa-stack fa-sm">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fas fa-minus fa-stack-1x fa-inverse"></i>
                                    </span>
                                </button>
                            </h2>
                        </div>
                        <div id="collapse<?php print $element['id'];?>" class="collapse collapsed" aria-labelledby="heading<?php print $element['id'];?>" data-parent="#accordion">
                            <div class="card-body">
                                <?php print $element['content']; ?>
                            </div>
                        </div>
                    </div>
                <?php 
                }
                }
                ?> 
                </div>                  
            </body>

【讨论】：