单击时引导手风琴图标更改

Question

我在我的代码中使用引导手风琴。单击每个列表，我将显示数据，图标将更改。

<i class="fa fa-plus-square"></i>

将更改为

<i class="fa fa-minus-square"></i>

我的代码：-

<div class="priority-lists">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindDistrictMeteres">
                 <h2 class="panel-title accordion-toggle">
                                                <i class="fa fa-minus-square"></i>
                                                WaterMind District Meters
                                            </h2>

            </div>
            <div id="waterMindDistrictMeteres" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row">
                        <div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindPressurePoints">
                 <h2 class="panel-title accordion-toggle">
                                                <i class="fa fa-minus-square"></i>
                                                WaterMind Pressure Points
                                            </h2>

            </div>
            <div id="waterMindPressurePoints" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row">
                        <div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindServicePoints">
                 <h2 class="panel-title accordion-toggle">
                                                <i class="fa fa-minus-square"></i>
                                                WaterMind Service Points
                                            </h2>

            </div>
            <div id="waterMindServicePoints" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="row">
                        <div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我尝试使用一些代码：

我的 jsFiddle 代码

我会看到图标无法正常工作。我正在寻找 CSS 或 JavaScript 或 jQuery 的解决方案。

Answer 1

您必须添加.collapsed到面板标题中！第一次.collapsed不是在那个元素上，但是引导程序在单击时更新了它。

我现在做的很好。

更新的小提琴