1
如果面板打開應該隱藏扇區和問題標籤,如果面板被摺疊扇區和問題應該可見。Bootstrap accordion在頁眉面板中顯示/隱藏文本
這裏是我的js文件
$(window).load(function() {
var parent = $('.panel-group .panel-heading');
parent.each(function (i, el) {
//el is element used for "{var parent}" class to execute value one by one
var el = $(el);
var collapsed = el.find('.panel-title a').hasClass('collapsed');
if (collapsed == true) {
el.find(".show-hide-si").show('slow');
} else {
el.find(".show-hide-si").hide('slow');
}
/**
* this will run on click to show and hide for sector&issues
* this is tricky,if you click and class is collapsed
*/
el.find('.panel-title a').click(function() {
var collapsed = $(this).hasClass('collapsed');
if (collapsed == false) {
el.find(".show-hide-si").show('slow');
} else {
el.find(".show-hide-si").hide('slow');
}
});
});
});
這是工作,但如果面板-P1是開放的,我對面板-P2單擊這兩個面板文本得到隱藏。
我的數據是動態的,所以使用類似<div id="collapse_<?php print $key; ?>"
而不是collapseOne,Two,Three。
在HTML
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" id="panel<?php print $key; ?>">
<div class="panel-heading" role="tab" id="heading_<?php print $key; ?>">
<h4 class="panel-title">
<a <?php print $clsa; ?> role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_<?php print $key; ?>" aria-expanded="true" aria-controls="collapse_<?php print $key; ?>">
Program : <?php print $ptitle; ?>
</a>
</h4>
<div class="show-hide-si">
<div class="sector">Sectors : <?php print $sectors_of_interes; ?></div>
<div class="issues">Issues : <?php print $pro_problem; ?></div>
</div>
</div>
<div id="collapse_<?php print $key; ?>" class="panel-collapse <?php print $clsin; ?>" role="tabpanel" aria-labelledby="heading_<?php print $key; ?>">
<div class="panel-body">
另一個問題是,如果我在面板P2點擊它是開放的,然後我點擊P1(P1,接近),P1開放,但P2不接近都是開放的。
能否請您做一個小提琴? –