我正在生成具有唯一客户端ID的动态嵌套手风琴。假设用户需要在Accordeon 3上进行修改，他打开特定的手风琴，然后单击“修改”按钮。然后，将用户传送到新页面上的新表单以进行修改。
在确认他的修改后，用户需要返回带有列出的手风琴的上一页，并且只打开他先前选择的特定手风琴。有人可以帮我吗？
这是我的代码：
<div id="accordionbox">
<?php
if (isset($listeClient) && count($listeClient) > 0) {
?>
<?php
$iClients = 0;
while ($iClients < count($listeClient)) {
$CLIENT_ID = $listeClient[$iClients]['CLIENT_ID'] == "" ? "" : $listeClient[$iClients]['CLIENT_ID'];
$nom = $listeClient[$iClients]['CLIENT_NOM'] == "" ? "" : $listeClient[$iClients]['CLIENT_NOM'];
$prenom = $listeClient[$iClients]['CLIENT_PRENOM'] == "" ? "" : $listeClient[$iClients]['CLIENT_PRENOM'];
$projet[] = $listeClient[$iClients]['projet'];
?>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain<?php echo $iClients; ?>" class="panel-group" aria-multiselectable="true">
<div id="headingClient<?php echo $iClients; ?>" class="panel">
<a class="panel-heading collapsed" title="Tab1"
aria-controls="collapseMain-<?php echo $CLIENT_ID; ?>" aria-expanded="false"
href="#collapseMain-<?php echo $CLIENT_ID; ?>" data-toggle="collapse">
<span class="panel-title"><?php echo $nom . ' ' . $prenom; ?></span>
</a>
<div id="collapseMain-<?php echo $CLIENT_ID; ?>" class="panel-collapse collapse"
aria-labelledby="heading<?php echo $CLIENT_ID; ?>" aria-expanded="false">
<div class="panel-body">
<div id="accordionInside-<?php echo $CLIENT_ID; ?>" class="panel-group"
aria-multiselectable="true" role="tablist">
<!-- Informations Personnelles -->
<div class="panel panel-default">
<a id="headingPersonnelle-<?php echo $CLIENT_ID; ?>"
class="panel-heading collapsed" title="Tab1"
aria-controls="collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
aria-expanded="false"
href="#collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title">Informations Personnelles</span>
</a>
<div id="collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingPersonnelle-<?php echo $CLIENT_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
Personelle
</div>
</div>
</div> <!-- Fin Informations Personnelles -->
<!-- Contracts -->
<div class="panel panel-default">
<a id="headingContract-<?php echo $CLIENT_ID; ?>"
class="panel-heading collapsed" title="Tab2"
aria-controls="collapseContract-<?php echo $CLIENT_ID; ?>"
aria-expanded="false"
href="#collapseContract-<?php echo $CLIENT_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title">Dossiers</span>
</a>
<div id="collapseContract-<?php echo $CLIENT_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingContract-<?php echo $CLIENT_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
<div id="accordionContractBody-<?php echo $CLIENT_ID; ?>"
class="panel-group" aria-multiselectable="true"
role="tablist">
<?php
$iProjets = 0;
while ($iProjets < count($projet[$iClients]['projetz'])) {
$PROJET_ID = $projet[$iClients]['projetz'][$iProjets]['PROJET_ID'];
?>
<div id="accordionContract-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-group rapprocher"
aria-multiselectable="true" role="tablist">
<div class="panel panel-default">
<a id="headingProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-heading collapsed" title="Tab1"
aria-controls="collapse-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
aria-expanded="false"
href="#collapseProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
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 $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
Contracts
</div>
</div>
</div>
<?php
$iProjets++;
}
?>
</div>
</div>
</div>
</div> <!-- Fin Contracts -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$iClients++;
}
?>
<?php
}
?>
</div>
这是我一直在尝试的：
<?php
if (isset($client_id) && $client_id <> "") {
?>
<script>
$(document).ready(function () {
//open all div starting with collapseMain
$("div[id^='collapseMain']").addClass("in");
//open all div starting with collapsePersonnelle
$("div[id^='collapsePersonnelle']").addClass("in");
//open all div starting with collapseContract
$("div[id^='collapseContract']").addClass("in");
//open all div starting with collapseProjet
$("div[id^='collapseProjet']").addClass("in");
//how to open only the specific accordion with the client id
});
</script>
<?php
}
?>
答案 0 :(得分：0)
我们可以看到您已将所有".panel-collapse" div中的唯一ID添加为id="collapseMain-<?php echo $CLIENT_ID; ?>"。我们也知道您拥有要为其打开手风琴的ID。
您可以使用jquery选择器$("#collapseMain-<?php echo $client_id; ?>")仅选择应打开的手风琴。
让我们假设php生成的html代码是：
<div id="accordionbox">
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-1" class="panel-group" aria-multiselectable="true">
<div id="headingClient-1" class="panel">
<a class="panel-heading collapsed" title="Tab1"
aria-controls="collapseMain-1>" aria-expanded="false"
href="#collapseMain-1" data-toggle="collapse"><span class="panel-title">Client 1</span></a>
<div id="collapseMain-1" class="panel-collapse collapse"
aria-labelledby="heading1" aria-expanded="false">
<div class="panel-body">
Content 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-2" class="panel-group" aria-multiselectable="true">
<div id="headingClient-2" class="panel">
<a class="panel-heading collapsed" title="Tab2"
aria-controls="collapseMain-2>" aria-expanded="false"
href="#collapseMain-2" data-toggle="collapse"><span class="panel-title">Client 2</span></a>
<div id="collapseMain-2" class="panel-collapse collapse"
aria-labelledby="heading2" aria-expanded="false">
<div class="panel-body">
Content 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-3" class="panel-group" aria-multiselectable="true">
<div id="headingClient-3" class="panel">
<a class="panel-heading collapsed" title="Tab3"
aria-controls="collapseMain-3>" aria-expanded="false"
href="#collapseMain-3" data-toggle="collapse"><span class="panel-title">Client 3</span></a>
<div id="collapseMain-3" class="panel-collapse collapse"
aria-labelledby="heading3" aria-expanded="false">
<div class="panel-body">
Content 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
然后您可以使用php之类的javascript代码生成
<?php
if (isset($client_id) && $client_id <> "") {
?>
$(document).ready(function() {
$("#collapseMain-<?php echo $client_id; ?>").addClass("in");
});
<?php } ?>
您可以看看这个jsfiddle