bootstrap手风琴图标更改点击

问题描述：

我在我的代码中使用引导手风琴。点击每个列表我将显示数据和图标将会改变。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的解决方案。

“不正常”，似乎在Chrome 38 – Mooseman 2014-10-10 10:14:52

工作是工作的罚款只是在Firefox罚款32 :) – 2014-10-10 10:15:59

不，我看到一个错误在这里，它们都以减号启动，当你点击它时，它会变成它应该是的propper图标。 – Dorvalla 2014-10-10 10:18:51

答

您必须将.collapsed添加到您的面板标题！第一次.collapsed不在该元素上，但引导程序通过点击进行更新。

它现在可以正常工作。

Updated fiddle

添加后，它也不起作用 – 2014-10-10 10:34:10

安德烈亚斯是对的，你必须添加'.collapsed'！ 'class =“面板标题折叠”' – KmeCnin 2014-10-10 16:19:47

答

您应该初始化您的图标：fa-plus-square，而不是fa-minus-square。

可以请你参考我的jsfiddle ..我看到一个错误在这里，他们都推出减号和当你点击它变成普罗佩图标它应该是 – 2014-10-10 10:25:33

答

Please check on this link

Js Fiddle

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

bootstrap手风琴图标更改点击

相关推荐