切換字體真棒圖標（如果啟用）？

Question

我正在使用很棒的字體在手風琴側欄菜單上放置箭頭。 額外的{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 。

您可以通過刪除click event函數的前兩行來刪除該功能

我還更改了一些HTML，以更好地運行代碼段。 您可以輕松更換它。

 $(document).ready(function(){ $("#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'); $("#accordian ul ul").slideUp(); if(!$(this).next().is(":visible")) { $(this).next().slideDown(); } }) }); 

 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"> <ul> <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>