Toggle font awesome icon if active?

Question

Я использую шрифт awesome, чтобы поместить стрелки в меню боковой панели аккордеона. Дополнительный {liquid code} от Shopify. У меня возникла проблема правильно переключить мой <i class="">, поскольку класс может зависеть от того, активна ли ссылка или нет.

Я пытаюсь иметь только активный или открытый <i>, чтобы быть фа-уголком, а остальные - угол-вниз.

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>

Answer 2

Я добавил здесь пример, похожий на то, что вы хотите. Он отключает другие li, как только вы нажмете на любой другой.

вы можете удалить эту функциональность, удаляя первую две строки функции события нажмите

Я также изменил некоторые HTML для лучшего запуска сниппеты. вы можете легко заменить его.

$(document).ready(function(){ 
 
\t  $("#accordian h3").click(function(){ 
 
      $("#accordian ul li").removeClass("active"); 
 
      document.querySelector('.fa').className='fa fa-angle-up'; 
 
      $(this).find('i').toggleClass('fa-angle-down fa-angle-up'); 
 
      $(this).parent().toggleClass('active'); 
 
\t \t  $("#accordian ul ul").slideUp(); 
 
\t \t  if(!$(this).next().is(":visible")) 
 
\t \t  { 
 
\t \t \t  $(this).next().slideDown(); 
 
\t \t  } 
 
\t  }) 
 
    });

li{ 
 
    cursor:pointer; 
 
} 
 
li.active{ 
 
    color:red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.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"> 
 
\t <ul> 
 
\t <li class="listItems"> 
 
     <h3>link 1 
 
     <span><i class="fa fa-angle-up"></i></span> 
 
     </h3> 
 
     </li> 
 
     <li class="listItems"> 
 
     <h3>link 2 
 
     <span><i class="fa fa-angle-up"></i></span> 
 
     </h3> 
 
     </li> 
 
    </ul> 
 
    </div>