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定义可见的图标。

 $.getJSON(urlBehance, function(json){
    var arrayOfObjects = json.projects;
    $.each(arrayOfObjects, function(index){
        console.log(arrayOfObjects[index].name);
    });
   //console.log(json.projects);

});

在点击w / accordion功能上切换字体真棒图标

3 个答案: