javascript - 切换 Font Awesome 图标(如果处于事件状态)？

Question

我正在使用 font Awesome 将箭头放在 Accordion 侧边栏菜单上。额外的{liquid code}来自 Shopify。我在正确切换我的 <i class=""> 时遇到问题因为该类可以取决于链接是否处于事件状态。

我试图只拥有事件或开放的 <i> fa Angular 向上，其他 fa Angular 向下。

HTML

<div id="accordian">
 <ul>{% for link in linklists.shop.links %}
  <li class="{% if link.active %}active{% endif %}">
   <h3>{{ link.title | escape }}
    <span><i class={% if link.active %}"fa fa-angle-up" aria-hidden="true"{% else %}"fa fa-angle-down" aria-hidden="true"{% endif %}></i></span>
   </h3>
  </li>
 </ul>
</div>        

JQUERY

$(document).ready(function(){
    $("#accordian h3").click(function(){
        $(this).find('i').toggleClass('fa-angle-down fa-angle-up');
        $("#accordian ul ul").slideUp();
        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
        }
    })
});

Answer 1

我猜你想要这样的东西。这不是最干净的解决方案，但它可以按您想要的方式工作(正如我理解您的问题一样)

$(document).ready(function(){
    $("#accordian h3").click(function(){
        var ico = $(this).find('i')
        if( ico.hasClass("fa-angle-up") ) {
                  $(ico).removeClass().addClass("fa-angle-down")
        } else {
                $(ico).removeClass().addClass("fa-angle-up")    
        }
        $("#accordian ul ul").slideUp();
        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
        }
    })
});

.fa-angle-up { color:red;}
i { font-family:fontAwesome }

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordian">
 <ul>{% for link in linklists.shop.links %}
  <li class="{% if link.active %}active{% endif %}">
   <h3>{{ link.title | escape }}
    <span><i class={% if link.active %}"fa fa-angle-up" aria-hidden="true"{% else %}"fa fa-angle-down" aria-hidden="true"{% endif %}></i></span>
   </h3>
  </li>
 </ul>
</div>