Bootstrap Accordian活动状态不起作用，并且所有面板均未折叠 [英] Bootstrap Accordian active state doesnt work and none of the panels are collapsed
本文介绍了Bootstrap Accordian活动状态不起作用，并且所有面板均未折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在用Accordian加载数据时遇到问题.有了参考对于我的问题发布的解决方案，我设置默认面板并将其他面板折叠成手风琴.这是我所做的代码.
I had a problem loading the data in accordian. With reference to the solution posted for my question, how would i set the default panel and collapse the other panels in an accordian. Here's the code to what i've done.
<?php
$fistForLoopEnds = false;
$secondForLoopEnds = false;
$thirdForLoopEnds = false;
$fourthForLoopEnds = false;
?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php foreach ($this->data2['distinct'] as $key) { ?>
<div class="panel panel-<?php if ($fistForLoopEnds != true) {
echo "danger";
$panelId = "headingOne";
$accodianId = "collapseOne";
$accordionExpanded = "true";
} elseif ($fistForLoopEnds == true && $secondForLoopEnds != true) {
echo "warning";
$panelId = "headingTwo";
$accodianId = "collapseTwo";
$accordionExpanded = "false\" class=\"collapsed";
} elseif ($fistForLoopEnds == true && $secondForLoopEnds == true && $thirdForLoopEnds != true) {
echo "info";
$panelId = "headingThree";
$accodianId = "collapseThree";
$accordionExpanded = "false\" class=\"collapsed";
} else { echo "success";
$panelId = "headingFour";
$accodianId = "collapseFour";
$accordionExpanded = "false\" class=\"collapsed";
}?>">
<div class="panel-heading" role="tab" id="<?php echo $panelId; ?>">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#<?php echo $accodianId; ?>" aria-expanded="<?php echo $accordionExpanded; ?>" aria-controls="<?php echo $accodianId; ?>">
<?php echo $key->sidebar_category; ?>
</a>
</h4>
</div>
<div id="<?php echo $accodianId; ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="<?php echo $panelId; ?>">
<div class="panel-body">
<?php
if ($fistForLoopEnds != true) {
foreach ($this->data2['results_railways'] as $key) { ?>
<h5><a href="<?php echo base_url(); ?>home/railways/<?php echo $key->post_id; ?>"><?php echo $key->sidebar_title; ?></a></h5>
<?php }
$fistForLoopEnds = true;
goto a;
}
elseif ($secondForLoopEnds != true) {
foreach ($this->data2['results_ssc'] as $key) { ?>
<h5><a href="<?php echo base_url(); ?>home/ssc/<?php echo $key->post_id; ?>"><?php echo $key->sidebar_title; ?></a></h5>
<?php }
$secondForLoopEnds = true;
goto a;
}
elseif ($thirdForLoopEnds != true) {
foreach ($this->data2['results_banks'] as $key) { ?>
<h5><a href="<?php echo base_url(); ?>home/banks/<?php echo $key->post_id; ?>"><?php echo $key->sidebar_title; ?></a></h5>
<?php }
$thirdForLoopEnds = true;
goto a;
}
elseif ($fourthForLoopEnds != true) {
foreach ($this->data2['results_upsc'] as $key) { ?>
<h5><a href="<?php echo base_url(); ?>home/upsc/<?php echo $key->post_id; ?>"><?php echo $key->sidebar_title; ?></a></h5>
<?php }
$fourthForLoopEnds = true;
goto a;
}
a:
?>
</div>
</div>
</div>
<?php } ?>
</div>
我需要哪些类来使Accordian处于活动状态或崩溃?
What classes should i need to make the accordian active state or collapse?
这是渲染的代码:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-danger">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Indian Railways </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h5><a href="http://localhost/ssc/home/railways/1"> Introduction and Zones:</a></h5>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" class="collapsed" aria-controls="collapseTwo">
Staff Selection Commission </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h5><a href="http://localhost/ssc/home/ssc/8">SSC Combined Graduate Level Exam pattern</a></h5>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" class="collapsed" aria-controls="collapseThree">
Bank Exams </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h5><a href="http://localhost/ssc/home/banks/16">Syllabus for Bank Clerical: English</a></h5>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" class="collapsed" aria-controls="collapseFour">
MPSC & UPSC </a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h5><a href="http://localhost/ssc/home/upsc/24">What is IAS?</a></h5>
</div>
</div>
</div>
</div>
推荐答案
您需要根据您的活动状态从id="<?php echo $accodianId; ?>"中删除in类，并且该类仅应为您想要的活动对象添加要在$fistForLoopEnds == true时打开内容，则需要类似的代码
You need to remove in class from id="<?php echo $accodianId; ?>" according to your active state, and this class should be added only for the active one for egs you want to open the content when $fistForLoopEnds == true then you need code something like,
<div class="panel panel-<?php if ($fistForLoopEnds != true) {
echo "danger";
$panelId = "headingOne";
$accodianId = "collapseOne";
$accordionExpanded = "true";
$in = "in";
} elseif ($fistForLoopEnds == true && $secondForLoopEnds != true) {
echo "warning";
$panelId = "headingTwo";
$accodianId = "collapseTwo";
$accordionExpanded = "false\" class=\"collapsed";
$in = "";
} elseif ($fistForLoopEnds == true && $secondForLoopEnds == true && $thirdForLoopEnds != true) {
echo "info";
$panelId = "headingThree";
$accodianId = "collapseThree";
$accordionExpanded = "false\" class=\"collapsed";
$in = "";
} else { echo "success";
$panelId = "headingFour";
$accodianId = "collapseFour";
$accordionExpanded = "false\" class=\"collapsed";
$in = "";
}?>">
<div id="<?php echo $accodianId; ?>" class="panel-collapse collapse <?php echo $in; ?>" role="tabpanel" aria-labelledby="<?php echo $panelId; ?>">
这篇关于Bootstrap Accordian活动状态不起作用，并且所有面板均未折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
