Question

我在我的代码中使用bootstrap手风琴。点击每个列表我将显示数据和图标将更改。

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

我尝试使用一些代码：

My jsFiddle code

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

Answer 1

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

现在它确实很好用。

Updated fiddle

Answer 2

Please check on this link

Js Fiddle

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

Answer 3

您应该使用fa-plus-square而不是fa-minus-square初始化图标。

bootstrap手风琴图标点击更改

3 个答案: