bootstrap collapse：显示一个隐藏另一个

Question

我的崩溃有问题。我想要做的是，当我点击显示其他隐藏的崩溃时，反之亦然。

我的工作基于本文中的答案（Bootstrap: Collapse other sections when one is expanded）

我的代码:( PHP的东西工作正常）

<div class="single-product-tab" id="myGroup">
    <h3 class="col-md-6 widget-title border-left mb-20">
        <a data-toggle="collapse" aria-expanded="false" id="lien_Fiche_Technique" data-target="#Fiche_Technique" data-parent="#myGroup">
            <?php echo $intitule_fiche; ?>
        </a>
    </h3>
    <h3 class="col-md-6 widget-title border-left mb-20">
        <a data-toggle="collapse" aria-expanded="false" id="lien_Support" data-target="#Support" data-parent="#myGroup">
            <?php echo $Support; ?>
        </a>
    </h3>
    <div class="accordion-group">
        <div class="collapse" id="Fiche_Technique" data-parent="#myGroup">
            <div class="card card-body">
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="description">
                        <table class="table table-striped">
                            <tbody>
                                <?php foreach ($list_produits as $value) { ?>
                                <?php if($value['libelle'] !="") { ?>
                                <tr>
                                    <td width="50%">
                                        <p class="color-title "><b><?php echo html_entity_decode($value['attribute']); ?></p></b></td>
                                    <td width="50%">
                                        <center>
                                            <p class="text-black-1">
                                                <?php echo html_entity_decode($value['libelle']);?>
                                            </p>
                                        </center>
                                    </td>
                                </tr>
                                <?php } ?>
                                <?php } ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="collapse" id="Support" data-parent="#myGroup">
            <div class="card card-body">
                <div class="tab-content ">
                    <div role="tabpanel" class="tab-pane active" id="description">
                        <table class="table table-striped">
                            <tbody>
                                <?php foreach ($list_Support_produits as $value) { ?>
                                <?php if($value['libelle'] !="") { ?>
                                <tr>
                                    <td width="50%">
                                        <p class="color-title "><b><?php echo html_entity_decode($value['attribute']); ?></p></b></td>
                                    <td width="50%">
                                        <center>
                                            <p class="text-black-1">
                                                <?php echo html_entity_decode($value['libelle']);?>
                                            </p>
                                        </center>
                                    </td>
                                </tr>
                                <?php } ?>
                                <?php } ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

尝试类似下面的内容，或者通过Jquery或javascript切换属性aria-expanded

<ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade ">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>