[英]Toggle font awesome icon if active?
我正在使用很棒的字体在手风琴侧栏菜单上放置箭头。 额外的{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();
}
})
});
我想你想要这样的东西。 这不是最干净的解决方案,但是它可以按您想要的方式工作(据我所知,您的问题)
$(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>
我在这里添加了一个与您想要的类似的示例。 单击其他任何按钮后,它将禁用其他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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.