[英]Bootstrap accordion click event not working properly with dynamic data
I am using bootstrap v3.3.7 and displaying accordions. 我正在使用bootstrap v3.3.7并显示手风琴。
<?php if($post->prime==1) {?>
// bootstrap accordions code
<?php } ?>
<?php foreach ($secMember as $secPay) {?>
// bootstrap accordions code
<?php }?>
let's talk about the above if condition
first. 让我们先谈谈以上
if condition
。 If the $post->prime==1
then it wil display the accordion. 如果
$post->prime==1
则它将显示手风琴。
Let's talk about the foreach
. 让我们谈谈
foreach
。
I am fetching the records from the database and depanding upon the total number of records it will display the accordions. 我正在从数据库中获取记录,并根据记录的总数来显示手风琴。
I am getting the accordion perfectly, there is no issue with it but I am getting the issue on click on accordion. 我手风琴很好,没有问题,但是单击手风琴时我遇到了问题。 I mean, When I click on according then it's closing only the first accordion.
我的意思是,当我单击时,它将仅关闭第一手风琴。 If I close the second accordion on click than also it's closeing the first one.
如果我单击关闭第二个手风琴,也关闭第一个。 I think there is some issue with
Id
. 我认为
Id
存在一些问题。 Can you check and help out with this issue? 您可以检查并解决此问题吗?
I am geting the output is 我得到的输出是
------------------
first accordion //getting from if condition
------------------
//Geting from foreach condition
------------------
second accordion
------------------
third accordion
------------------
|
|
//display depanding upon the number of records
If I click on second accordion then it is closing first one same as on third accordion. 如果我单击第二个手风琴,那么它将关闭与第三个手风琴相同的第一个手风琴。
Whole code here 整个代码在这里
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
<?php if($post->prime==1) {?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<?php echo $secPay->title;?>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<?php echo $secPay->content;?>
</div>
</div>
</div>
<?php }?>
<?php foreach ($secMember as $secPay) {?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<?php echo $secPay->title;?>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<?php echo $secPay->content;?>
</div>
</div>
</div>
<?php }?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Yes, Finally I found the answer. 是的,终于找到了答案。 I don't know it's correct or not.
我不知道这是正确还是错误。
What I did, 我做了什么,
I created a variable called as $x=1
outside of the foreach and $x++
inside foreach. 我在foreach外部创建了一个名为
$x=1
的变量,在foreach内部创建了一个名为$x++
的变量。 I updated x
on two place. 我在两个地方更新了
x
。
First one 第一
<a role="button" data-toggle="collapse" href="#collapseOne<?php echo $x;?>" aria-expanded="true" aria-controls="collapseOne">
Second one 第二个
<div id="collapseOne<?php echo $x;?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
and it's working perfectly. 而且运作良好。 Please let me know I am on the right path or not.
请让我知道我是否在正确的道路上。 should I change anything more in this?
我应该对此进行更多更改吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.