折叠/展开确实有效但不正确。一旦我折叠所有内容并展开一个项目,然后如果我展开另一个项目,第一个项目将再次折叠。此外,图像 - 到+,反之亦然。
请帮忙。
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#info2">
<div class="row">
<div class="col-md-12">
<label class="bold">INFO 2 </label>
<label class="aa-dark-red">
DEFERRED BY 300300 STA DFW 24 MAR 14
</label>
<span class="pull-right"> <i class="glyphicon glyphicon-minus"></i></</span>
</div>
</div>
</a>
</div>
</div>
<div id="info2" class="panel-collapse collapse in">
<div class="pad-all">
<div class="row">
<div class="col-md-12 glyphicon glyphicon-pencil"> CONT DFRL. MPN DON'T CROSS</div>
</div>
<div class="row pad-top aa-dark-gray">
<div class="col-md-2">ESO</div>
<div class="col-md-2">PAGE</div>
<div class="col-md-1">ITEM</div>
<div class="col-md-1">MPN</div>
<div class="col-md-1">ITEM</div>
<div class="col-md-1">MPN</div>
<div class="col-md-1">ITEM</div>
<div class="col-md-1">MPN</div>
<div class="col-md-1">ASSY MPN</div>
<div class="col-md-1"></div>
</div>
<div class="row aa-black">
<div class="col-md-2">2137625-02-67</div>
<div class="col-md-2">10002G-0A</div>
<div class="col-md-1">290</div>
<div class="col-md-1">F0444636</div>
<div class="col-md-1">300</div>
<div class="col-md-1">F0418391</div>
<div class="col-md-1">375</div>
<div class="col-md-1">NAS600-3</div>
<div class="col-md-1">F0418316</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
</div>
<!--INFO 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#info3">
<div class="row">
<div class="col-md-12">
<label class="bold">INFO 3 </label>
<label class="aa-dark-red">
DEFERRED BY 300300 STA DFW 24 MAR 14
</label>
<span class="pull-right"> <i class="glyphicon glyphicon-minus"></i></</span>
</div>
</div>
</a>
</div>
</div>
<div id="info3" class="panel-collapse collapse in">
<div class="pad-all">
<div class="row">
<div class="col-md-12 glyphicon glyphicon-pencil"> CONT DFRL. MPN DON'T CROSS</div>
</div>
<div class="row pad-top aa-dark-gray">
<div class="col-md-2">ESO</div>
<div class="col-md-2">PAGE</div>
<div class="col-md-1">ITEM</div>
<div class="col-md-1">MPN</div>
<div class="col-md-1">ITEM</div>
<div class="col-md-1">MPN</div>
<div class="col-md-1">ITEM</div>
<div class="col-md-1">MPN</div>
<div class="col-md-1">ASSY MPN</div>
<div class="col-md-1"></div>
</div>
<div class="row aa-black">
<div class="col-md-2">2137625-02-67</div>
<div class="col-md-2">10002G-0A</div>
<div class="col-md-1">290</div>
<div class="col-md-1">F0444636</div>
<div class="col-md-1">300</div>
<div class="col-md-1">F0418391</div>
<div class="col-md-1">375</div>
<div class="col-md-1">NAS600-3</div>
<div class="col-md-1">F0418316</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
</div>
<!--INFO 4-->
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#info4">
<div class="row">
<div class="col-md-12">
<label class="bold">INFO 4 </label>
<label class="aa-dark-blue">
ATBT : REPLACE TRAY TABLE ASSY MPN F0444636 CPN TAB1078 1EA ON AOG TO LAX FROM VENDOR
</label>
<span class="pull-right"> <i class="glyphicon glyphicon-minus"></i></</span>
</div>
</div>
</a>
</div>
</div>
<div id="info4" class="panel-collapse collapse in pad-all">
<div class="row aa-dark-gray">
<div class="col-md-2">DATE</div>
<div class="col-md-2">NAME</div>
<div class="col-md-8"></div>
</div>
<div class="row aa-black">
<div class="col-md-2">17 APR/FTW</div>
<div class="col-md-2">A A TECH 847383</div>
<div class="col-md-8"></div>
</div>
</div>
</div>
<!--INFO 5 -->
<div class="panel panel-default">
<div class="panel-heading bg-dark-gray">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#info5">
<div class="row">
<div class="col-md-12">
<label class="bold aa-green">
CLOSED : CORRECTED BY 732838 STA LAX 18 APR 14
</label>
<span class="pull-right"> <i class="glyphicon glyphicon-minus"></i></</span>
</div>
</div>
</a>
</div>
</div>
<div id="info5" class="panel-collapse collapse in">
<div class="pad-all">
<div class="row">
<div class="col-md-12 glyphicon glyphicon-pencil"> REMOVED AND REPLACED 15G TRAY TABLE PER AMM 25-25-03 OPERATIONAL CHECK NORMAL CLEARED MIC SHEET.</div>
</div>
</div>
</div>
</div>
</div>
jQuery代码 -
$(document).ready(function () {
$('#panel-collapse').on('shown', function () {
$(this).parent("div").find(".glyphicon glyphicon-minus")
.removeClass(".glyphicon glyphicon-minus").addClass(".glyphicon glyphicon-plus");
});
$('div.panel-collapse').on('hidden', function () {
$(this).parent("div").find(".glyphicon glyphicon-plus")
.removeClass(".glyphicon glyphicon-plus").addClass(".glyphicon glyphicon-minus");
});
});