如果激活，切换字体真棒图标？-Java 学习之路

我正在使用字体真棒将箭头放在手风琴侧边栏菜单上 . 额外 {liquid code} 来自Shopify . 我有一个问题是要正确切换我的 <i class=""> ，因为类可以依赖于链接是否处于活动状态 .

我试图只有活动或打开 <i> 是fa-angle-up而其他的是fa-angle-down .

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();
        }
    })
});

2 回答

我想你想要这样的东西 . 它不是最干净的解决方案，但它可以按你的需要工作（据我了解你的问题）

$(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>

回复于 2024-05-10T00:40:34+08:00

我在这里添加了一个类似于你想要的例子 . 一旦你点击其他任何一个，它就会禁用其他 li .

您可以通过删除单击事件功能的前两行来删除该功能

我还改变了一些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>

回复于 2024-05-10T00:40:34+08:00

如果激活，切换字体真棒图标？

2 回答

相关问题