Question

我正在使用font 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以获得更好的代码段运行。你可以轻松更换它。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: