单击带有手风琴功能的“字体真棒”图标

Question

我几乎没有使用jQuery的经验，但是我已经看到实现想要的结果非常简单。 面板标题中的span标签显示了一个很棒的右向插入号，单击时（当手风琴将触发时），我希望将其切换为向下插入的插入号。 页面上有12种此类手风琴类别，因此我需要它可用于插入符号图标的所有实例。

<div class="panel-group">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#category" data-toggle="collapse" data-parent="#difcategory">
                <span class="icon-caret-right"></span> Title 
            </a>
        </h4>
    </div>

    <div id="category" class="panel-collapse collapse">
        <div class="panel-body">Accordion info</div><!-- end panel-body -->
    </div><!-- end panel-collapse collapse -->
</div><!-- end panel-group -->

Answer 1

您可以尝试这样的事情。

<a class="toggle-me"><span></span>Title</a>

.panel-heading .toggle-me:before {
    font-family: 'FontAwesome'; 
    content: "\f078";        
    color: #303030;
    font-size: 12px;
    margin-right: 10px;      
}

.panel-heading .toggle-me.collapsed:before {
    content: "\f054";   
}

Answer 2

因为您正在使用基于类的方法，并且字体很棒，所以可以更改负责显示图标的类。

$('#category').on('click' function() {
  var $icon = $(this).find('span');
  if ($icon.hasClass('icon-caret-right')) {
    $icon.removeClass('icon-caret-right').addClass('icon-caret-down');
  } else {
    $icon.addClass('icon-caret-right').removeClass('icon-caret-down');
  }
  // code to do accordion
}

Answer 3

将两个图标都放在布局中，并使用CSS定义可见的图标。

<div class="panel-group">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#category" data-toggle="collapse" data-parent="#difcategory">
                <span class="icon-caret-right"></span><span class="icon-caret-down"></span> Title 
            </a>
        </h4>
    </div>
    <div id="category" class="panel-collapse collapse">
        <div class="panel-body">Accordion info</div><!-- end panel-body -->
    </div><!-- end panel-collapse collapse -->
</div><!-- end panel-group -->

.panel-title a .icon-caret-right
{
    display: block;
}
.panel-title a .icon-caret-down
{
    display: none;
}
.panel-title a.collapsed .icon-caret-right
{
    display: none;
}
.panel-title a.collapsed .icon-caret-down
{
    display: block;
}