您好我刚刚创建了一个与此主题相关的问题。但我在下面发现了引导程序的奇怪行为:(请查看我之前的问题:https://stackoverflow.com/questions/39786787/how-to-handle-collapse-expand-all-with-single-click-accordion-work-together-in-b)
我有2个不同的小组,因为我在它们之间添加了一些段落。
<div class="row extra-left-padding-0">
<div class="spaced-columns">
<div class="container">
<button class="collapse-init">Click to disable accordion behavior</button>
<br />
</div>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<legend class="col-xs-6 col-sm-5 control-label">1-Yönetici Degerlendirme</legend>
<div class="col-xs-6 col-sm-2 col-sm-height col-sm-top">
<div id="g0"></div>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-4 col-sm-3">
<h4>Axp/10 :
</h4>
</div>
<div class="col-xs-2 col-sm-2">
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion0">
<div class="panel panel-default">
<div class="panel-heading" data-parent="#accordion0" data-target="#collapse0" data-toggle="collapse" role="button">
<h4 class="panel-title accordion-toggle">1-Yönetici Değerlendirme Kriterler
<i class="fa fa-chevron-down fa pull-right"></i>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse0" role="tabpanel">
<div class="panel-body">
test0
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<legend class="col-xs-6 col-sm-5 control-label">2-Piyasa Ve Şirket içi İstihbarat</legend>
<div class="col-xs-6 col-sm-2 col-sm-height col-sm-top">
<div id="g1"></div>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">
<h4>Axp/10 :
</h4>
</div>
<div class="col-xs-2 col-sm-2">
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading" data-parent="#accordion1" data-target="#collapse1" data-toggle="collapse" role="button">
<h4 class="panel-title">2-Piyasa Ve Şirket içi İstihbarat Kriterler
<i class="fa fa-chevron-down fa pull-right"></i>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse1" role="tabpanel">
<div class="panel-body">
TEST
</div>
</div>
</div>
</div>
</div>
</div>
</div>
看看这种奇怪的行为:
(这个没有用。没有崩溃。)
$('#accordion1').on('show.bs.collapse', function () {
$('#collapse1').collapse('hide');
console.log('collpase0 is clicked');
});
但如果我改变了这个;
$('#accordion1').on('show.bs.collapse', function () {
$('#collapse0').collapse('hide');
console.log('collpase0 is clicked');
});
我将collapse1 id设为collapse0,如果我点击accrodion1,折叠对accordion0有效,但如果我这样做:
$('#accordion1').on('show.bs.collapse', function () {
$('#collapse1').collapse('hide');
console.log('collpase0 is clicked');
});
它正在崩溃,但没有成功不工作我怎么能解决它?如果我点击accordion0它应该折叠它的内容。
答案 0 :(得分:1)
让我说对了,你试图创建一个带有段落的手风琴效果,这样如果你打开一个面板,另一个面板应该关闭?是的,如果是这样的话,那么你需要简单地交替崩溃动作。这是我用你的代码创建的小提琴,展示了这一点 https://jsfiddle.net/icerebellion/c59jk54h/1/
$('#accordion0').on('show.bs.collapse', function() {
$('#collapse1').collapse('hide');
console.log('collpase0 is clicked');
});
$('#accordion1').on('show.bs.collapse', function() {
$('#collapse0').collapse('hide');
console.log('collpase1 is clicked');
});