如何根据其唯一 ID 打开特定的嵌套引导手风琴
Posted
技术标签:
【中文标题】如何根据其唯一 ID 打开特定的嵌套引导手风琴【英文标题】：How to open a specific nested bootstrap accordeon based on its unique id 【发布时间】：2019-10-14 17:01:46 【问题描述】：我正在生成一个具有唯一客户端 ID 的动态嵌套手风琴。假设用户需要对手风琴 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
?>
【问题讨论】：
仅快速阅读了您的问题，因此不确定此答案是否正是您所追求的，但一个想法是在每个包含唯一 ID 的选项上存储一个数据属性。当用户单击该选项时，临时存储唯一 id（有很多方法可以做到这一点，即作为 cookie），当用户返回页面时，使用 js 查找包含该唯一 id 的选项并应用打开它的类。 感谢 Spangle，我想我们有同样的想法。我正在尝试，看看有什么好处 很高兴为您提供帮助，如果还有其他问题，请告诉我 :) 【参考方案1】：我们可以看到您已将唯一 ID 添加到您的所有 ".panel-collapse" div 为 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
【讨论】：
以上是关于如何根据其唯一 ID 打开特定的嵌套引导手风琴的主要内容，如果未能解决你的问题，请参考以下文章