[英]jQuery Accordion change font awesome icon class on click
I have a question about a simple jQuery accordion I found. 我有一个关于我发现的简单jQuery手风琴的问题。
I'd like to use Font Awesome icons to indicate the active/inactive state with plus and minus icons. 我想使用Font Awesome图标来指示带有加号和减号图标的活动/非活动状态。 In my JSFiddle you see the accordion titles with plus icons.
在我的JSFiddle中,您可以看到带有加号图标的手风琴标题。 When you click on a title the "fa-plus" class needs to change to "fa-minus".
单击标题时,“fa-plus”类需要更改为“fa-minus”。
I already did some tests with add and removeClass, but I couldn't get it working. 我已经使用add和removeClass做了一些测试,但是我无法让它工作。 I'm really a jQuery/javascript noob!
我真的是一个jQuery / javascript菜鸟! Hope you guys can help me out :-).
希望你们能帮助我:-)。
jQuery('.accordion dt').click(function() {
jQuery('.accordion dt').removeClass('active');
jQuery('.accordion_content').slideUp('normal');
if(jQuery(this).next().is(':hidden') == true) {
jQuery(this).addClass('active');
jQuery(this).next().slideDown('normal');
}
});
jQuery('.accordion_content').hide();
Why not chain your code instead of repeat yourself: 为什么不链接代码而不是重复自己:
jQuery('.accordion dt').click(function() {
jQuery(this).find('i').toggleClass('fa-plus fa-minus')
.closest('dt').next().slideToggle()
.siblings('.accordion_content').slideUp();
});
jQuery('.accordion_content').hide();
Update: 更新:
Your final code should look like this: 您的最终代码应如下所示:
jQuery('.accordion dt').click(function() {
jQuery(this).toggleClass('active').find('i').toggleClass('fa-plus fa-minus')
.closest('dt').siblings('dt')
.removeClass('active').find('i')
.removeClass('fa-minus').addClass('fa-plus');
jQuery(this).next('.accordion_content').slideToggle()
.siblings('.accordion_content').slideUp();
});
jQuery('.accordion_content').hide();
jQuery('.accordion dt').click(function() {
$(this).find('i').toggleClass('fa-plus fa-minus') // add this line
jQuery('.accordion dt').removeClass('active');
jQuery('.accordion_content').slideUp('normal');
if(jQuery(this).next().is(':hidden') == true) {
jQuery(this).addClass('active');
jQuery(this).next().slideDown('normal');
}
});
jQuery('.accordion_content').hide();
jQuery('.accordion dt').click(function() {
$('.accordion dt').find('i').removeClass('fa-minus'); // Hides the minus sign on click
$(this).find('i').addClass('fa-plus fa-minus'); // add this line
jQuery('.accordion dt').removeClass('active');
jQuery('.accordion_content').slideUp('normal');
if(jQuery(this).next().is(':hidden') == true) {
jQuery(this).addClass('active');
jQuery(this).next().slideDown('normal');
}
});
jQuery('.accordion_content').hide();
Demo removes minus sign when other tabs are clicked 单击其他选项卡时,演示将删除减号
This is a good solution but when using the first tab opened it gets a little messy. 这是一个很好的解决方案,但是当使用第一个打开的标签时,它会变得有点混乱。 But you can make this work only using css.
但是你只能使用css来完成这项工作。 I'm using bootstrap accordion and font awesome and i created custom icon with it so when the tab is closed it gets the closed icon and when it is opened it get the other icon.
我正在使用bootstrap手风琴和字体很棒,我用它创建了自定义图标,所以当标签关闭时,它会获得关闭的图标,当它打开时,它会获得另一个图标。 here is the html code:
这是html代码:
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle accordion-icon-arrow-circle" href="#collapseOne" data- toggle="collapse" data-parent="#accordion2">
<span class="accordion-icon"></span>
Accordion Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">Here will be the accordion text</div>
</div>
</div>
and down here is the css style: 而这里是css风格:
.accordion-icon-arrow-circle {
position:relative
}
.accordion-icon {
position: absolute;
left: 7px;
top: 7px;
display: block;
width: 20px;
height: 20px;
line-height: 21px;
text-align: center;
font-size: 14px;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
.accordion-icon-arrow-circle .accordion-icon:before {
content: "\f0ab";
}
.accordion-icon-arrow-circle.collapsed .accordion-icon:before {
content: "\f0a9";
}
i used to add extra class .accordion-icon-arrow-circle to accorion title and the .collapsed class is called by bootstrap.js when the accordion title is clicked. 我曾经将额外的.accordion -icon-arrow-circle类添加到accorion标题中,当点击手风琴标题时,bootstrap.js会调用.collapsed类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.