Javascript 单击中的引导手风琴图标更改

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

<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>

WaterMind地区仪表
水心压力点
WaterMind服务点

我尝试使用一些代码：

---

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

你应该用：

fa加平方

，而不是

fa减平方

来初始化你的图标：

fa加平方

，而不是

fa减平方

你必须将

折叠的
添加到你的面板标题中！第一次
.collapsed
不在该元素上，但bootstrap在单击时更新了它

我现在觉得很好用

您必须在面板标题中添加
.collapsed
！第一次
.collapsed
不在该元素上，但bootstrap在单击时更新了它

我现在觉得很好用




“工作不正常”在Chrome 38中似乎工作正常。在firefox 32中工作正常：）不，我在这里看到一个错误，它们都以负号启动，当你点击它时，它会变成应该的支撑图标。是的，这是我面临的问题…“工作不正常”在Chrome 38中似乎工作正常。在firefox 32中工作正常：）不，我在这里看到一个错误，它们都以负号启动，当你点击它时，它会变成应该的propper图标。是的，是真的@Dorvalla，这就是我面临的问题…你能参考我的JSFIDLE吗。。我在这里看到一个错误，它们都以负号启动，当您单击它时，它会变成propper图标，应该是u，请参考我的JSFIDLE。。我在这里看到一个错误，它们都以负号启动，当你点击它时，它会变成道具图标，应该是正确的，你必须添加
。折叠
class=“panel heading collapsed”
Andreas是对的，您必须添加
。collapsed
class=“面板标题已折叠”
Please check on this link

You must add a class "collapsed" next to "panel-heading". your problem will be solved