jQuery Accordion在点击时更改字体真棒图标类 [英] jQuery Accordion change font awesome icon class on click

问题描述

我有一个关于我发现的简单jQuery手风琴的问题。



我想使用Font Awesome图标来指示带有加号的活动/非活动状态减去图标。在我的JSFiddle中，您可以看到带有加号图标的标题。单击标题时，fa-plus类需要更改为fa-minus。



我已经使用add和removeClass进行了一些测试，但是我无法让它发挥作用。我真的是一个jQuery / javascript菜鸟！希望你们能帮助我:-)。

I have a question about a simple jQuery accordion I found.

I'd like to use Font Awesome icons to indicate the active/inactive state with plus and minus icons. In my JSFiddle you see the titles with plus icons. When you click on a title the "fa-plus" class needs to change to "fa-minus".

I already did some tests with add and removeClass, but I couldn't get it working. I'm really a jQuery/javascript noob! Hope you guys can help me out :-).

  <nav id="nav_why_us">
                	 <ul class="clearfix">
                     <li> <a onclick="displaySub(this.id)" id="mainMenu"> 
                     <span>Price</span><i style="float:right" class="fa fa-plus-circle"></i></a>
                      <ul class="dispNone abc">
                        <li> <a href="#"> General Information</a></li>
                        <li><a href="#"> Vehicle Specification</a></li>
                        <li><a href="#"> Purchase Information</a></li>
                        <li><a href="#"> Finance Information</a></li>
                        <li><a href="#"> Vehicle Warranty</a></li>
                        <li><a href="#"> License/Registration</a> </li>
                        <li><a href="#">Insurance Information</a> </li>
                        <li><a href="#">Parts Information</a></li>
                      </ul>
                    </li>
                    <li><a onclick="displaySub(this.id)" id="menu2"> <span>Body Styles</span><i style="float:right" class="fa fa-plus-circle"></i></a>
                       <ul class="dispNone abc">
                        <li><a href="Vms-NewFuelLog.html">New Fuel Log</a></li>
                        <li><a href="Vms- ViewFuelLog.html">View Fuel Log</a></li>
                        <li><a href="Vms-EditFuelEntry.html">Edit Fuel Log</a></li>
                        <li><a href="#">Remove Fuel Log</a></li>
                      </ul>
                    </li>
</ul>
</nav>

function displaySub(id)
{
	  

$('#'+id).addClass("has-sub");
			if($('#'+id).hasClass('has-sub'))
			{
				
			$('i').toggleClass('fa-plus-circle fa-minus-circle');
			}
			$('#'+id).next('ul').toggleClass('dispNone');
		return false;

}

推荐答案

（' < span class =code-string>＃' + id）.addClass（ has-sub ）;
if （

('#'+id).addClass("has-sub"); if(

（' ＃' + id）.hasClass（' has-sub'））
{

('#'+id).hasClass('has-sub')) {

（' i'）。toggleClass（' fa-plus-circle fa-minus-circle'）;
}

('i').toggleClass('fa-plus-circle fa-minus-circle'); }

这篇关于jQuery Accordion在点击时更改字体真棒图标类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！