Bootstrap折叠/展开图像

时间:2014-05-16 16:11:28

标签: twitter-bootstrap

折叠/展开确实有效但不正确。一旦我折叠所有内容并展开一个项目,然后如果我展开另一个项目,第一个项目将再次折叠。此外,图像 - 到+,反之亦然。

请帮忙。

<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");
    });
});

0 个答案:

没有答案