jquery - 如何向自举 Accordion 添加加减号

Question

我使用自举 Accordion ，其中第一个面板始终打开，打开的面板获得一个类 in 。我正在检查我的 jquery 代码以查看该类是否包含 in 类，它突出显示了 anchor 。但目前所有 anchor 都突出显示。

我只是想让第一个 anchor 突出显示，它是打开的，其余的关闭面板应该有一些不同的风格。

这是 fiddle :Fiddle

如您所见，所有 anchor 标记都已突出显示。我想要第一个 anchor 获得一些不同的样式。整个想法是在 Accordion 中添加加号/减号。

Answer 1

对上面@Arun P Johny 的回答做了轻微修改

首先:更改了<i>到 <span>标记，根据 Bootstrap 3 文档

第二个:为用户关闭打开的选项卡、删除类并将减号图标更改为加号图标添加了第二个事件检查

Fiddle

var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
$active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
$('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
$('#accordion').on('show.bs.collapse', function (e)
{
    $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion').on('hide.bs.collapse', function (e)
{
    $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});