如何打开动态生成的Bootstrap Accordeon面板

Question

我如何通过Bootstrap Accordeon面板打开或关闭面板？

我正在动态生成带有动态ID的多级引导协议。我缺少有关如何访问单个Accordeon面板的想法。

        <?php
    if(isset($listeClient) && count($listeClient) > 0)
    {
    ?>
    <?php
    $iClients = 0;
    while($iClients < count($listeClient))
    {
    $CLIENT_ID = $listeClient[$iClients]['CLIENT_ID'] == "" ? "" :   $listeClient[$iClients]['CLIENT_ID']; $projet[] = $listeClient[$iClients]['projet'];
    ?>
    <div class="form-group"><div class="col-xs-12"><div class="panel panel-default"><div id="accordion<?php echo $iClients; ?>" class="panel-group" aria-multiselectable="true"><div id="heading<?php echo $iClients; ?>" class="panel">
    <a class="panel-heading collapsed" title="Tab1" aria-controls="collapseMain<?php echo $iClients; ?>" aria-expanded="false" href="#collapseMain<?php echo $iClients; ?>" data-toggle="collapse"><span class="panel-title"><?php echo $nom.' '.$prenom; ?></span></a>
    <div id="collapseMain<?php echo $iClients; ?>" class="panel-collapse collapse" aria-labelledby="heading<?php echo $iClients; ?>" aria-expanded="false"><div class="panel-body"><div id="accordion<?php echo $iClients; ?>" class="panel-group" aria-multiselectable="true" role="tablist" >

    <div class="panel panel-default"><a id="headingPersonnelle<?php echo $iClients; ?>" class="panel-heading collapsed" title="Tab1" aria-controls="collapse<?php echo $iClients; ?>" aria-expanded="false" href="#collapse<?php echo $iClients; ?>" data-toggle="collapse" role="tab">
    <span class="panel-title">Informations Personnelles</span></a><div id="collapse<?php echo $iClients; ?>" class="panel-collapse collapse" aria-labelledby="headingPersonnelle<?php echo $iClients; ?>" role="tabpanel" aria-expanded="false"><div class="panel-body">
    Personelle</div></div></div>

    <!-- Contracts -->
    <div class="panel panel-default"><a id="headingContract<?php echo $iClients; ?>" class="panel-heading collapsed" title="Tab2" aria-controls="collapsePersonnelle<?php echo $iClients; ?>" aria-expanded="false" href="#collapsePersonnelle<?php echo $iClients; ?>" data-toggle="collapse" role="tab">
    <span class="panel-title">Dossiers</span></a>

    <div id="collapsePersonnelle<?php echo $iClients; ?>" class="panel-collapse collapse" aria-labelledby="headingContract<?php echo $iClients; ?>" role="tabpanel" aria-expanded="false">
    <div class="panel-body"><?php $iProjets = 0; while($iProjets < count($projet[$iClients]['projetz'])) { $PROJET_ID = $projet[$iClients]['projetz'][$iProjets]['PROJET_ID']; ?>   

    <div id="accordionContract<?php echo $iClients; ?>" class="panel-group" aria-multiselectable="true" role="tablist" ><div class="panel panel-default"><a id="headingProjet<?php echo $iProjets; ?>" class="panel-heading collapsed" title="Tab1" aria-controls="collapse<?php echo $iProjets; ?>" aria-expanded="false" href="#collapseProjet<?php echo $iProjets; ?>" data-toggle="collapse" role="tab">
    <span class="panel-title"><?php echo $projet[$iClients]['projetz'][$iProjets]['PROJET_NOM']; ?></span></a></div>    

    <div id="collapseProjet<?php echo $iProjets; ?>" class="panel-collapse collapse" aria-labelledby="headingProjet<?php echo $iProjets; ?>" role="tabpanel" aria-expanded="false">Contracts</div>  </div>  
    <?php   
    $iProjets++;
    }
    ?>

这是我尝试过的：

                        $('[data-toggle="collapse"]').click(function(e){
              e.preventDefault();
              var target_element= $(this).attr("href");
              $(target_element).collapse('toggle');
              return false;
        });