Jquery 单击时更改字体图标,但单击下一项时返回原始图标
我使用的是Bootstrap3面板,并在面板项目中添加了字体可怕的加号和减号图标。我正在寻找一种使用Jquery将加号改为减号“onClick”的方法,然后当单击另一个面板项时,我希望减号图标改回加号 我一直在尝试一些Jquery,并且已经接近成功。我想我可能只是错过了一些简单的东西。只需单击几下,它就可以正常工作,然后开始混淆要切换回哪个类。我的HTML:Jquery 单击时更改字体图标,但单击下一项时返回原始图标,jquery,twitter-bootstrap-3,onclick,font-awesome,toggleclass,Jquery,Twitter Bootstrap 3,Onclick,Font Awesome,Toggleclass,我使用的是Bootstrap3面板,并在面板项目中添加了字体可怕的加号和减号图标。我正在寻找一种使用Jquery将加号改为减号“onClick”的方法,然后当单击另一个面板项时,我希望减号图标改回加号 我一直在尝试一些Jquery,并且已经接近成功。我想我可能只是错过了一些简单的东西。只需单击几下,它就可以正常工作,然后开始混淆要切换回哪个类。我的HTML: <div class="panel-group" id="accordion" role="tablist" aria-multis
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title"><a class="collapsed faq-links" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"><i class="fa fa-plus-square-o fa-2x"></i> Panel Title 1</a></h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<p>Panel body text</p>
</div>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading13">
<h4 class="panel-title"><a class="collapsed faq-links" data-toggle="collapse" data-parent="#accordion" href="#collapse13" aria-expanded="false" aria-controls="collapse13"><i class="fa fa-plus-square-o fa-2x"></i> Panel Title 2</a></h4>
</div>
<div id="collapse13" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading13">
<div class="panel-body">
<p>Panel body text 2</p>
</div>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title"><a class="collapsed faq-links" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><i class="fa fa-plus-square-o fa-2x"></i> Panel Title 3</a></h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<p>Panel body text 3</p>
</div>
</div>
</div>
</div>
如您所见,我使用单击一个函数,然后模糊下一个函数作为事件侦听器。我做错了什么?我设置了一个来进一步解释我的问题
提前感谢您的帮助。
更新:Shivali Patel对我有效的回答:
$('.faq-links').click(function(){
var collapsed=$(this).find('i').hasClass('fa-plus-square-o');
$('.faq-links').find('i').removeClass('fa-minus-square-o');
$('.faq-links').find('i').addClass('fa-plus-square-o');
if(collapsed)
$(this).find('i').toggleClass('fa-plus-square-o fa-2x fa-minus-square-o fa-2x')
});
他基于collapse创建了一个变量,并在toggleClass事件之外使用了addClass和removeClass。伟大的工作Shivali。这是因为
模糊事件发生的
如果在任何手风琴外单击,仍会调用模糊事件并更改相关手风琴的图标。
示例:
Shivali,感谢您的帮助性回答。这立刻解决了我的问题。非常感谢!!!!
$('.faq-links').click(function(){
var collapsed=$(this).find('i').hasClass('fa-plus-square-o');
$('.faq-links').find('i').removeClass('fa-minus-square-o');
$('.faq-links').find('i').addClass('fa-plus-square-o');
if(collapsed)
$(this).find('i').toggleClass('fa-plus-square-o fa-2x fa-minus-square-o fa-2x')
});