打开时显示图标，关闭时显示另一个图标（jQuery Bootstrap）

Question

我需要以下内容，当页面加载时必须显示一个带有减号图标的开放式手风琴，当关闭时，加号图标应该会改变。

Here's an example in fiddle

$('div.accordion-body').on('shown', function () {
    $(this).parent("div").find(".icon-plus")
                         .removeClass("icon-plus")
                         .addClass("icon-minus");
});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div").find(".icon-minus")
                         .removeClass("icon-minus")
                         .addClass("icon-plus");
});

如何使用默认图标减去显示开放式手风琴？

Answer 1

比目前的答案有更简单的方法。您可以使用CSS完成所有操作，因此您无需进入DOM并动态更改任何元素。

如果您包含以下CSS（改编自show collapse state with Chevron icon ）：

.accordion-heading a:after {
    font-family: 'Glyphicons Halflings';
    content: "\2212"; /* Plus */   
    float: right; 
    color: grey; 
}
.accordion-heading a.collapsed:after {
    content: "\2b";  /* Minus */
}

然后你甚至可以删除图标元素，因为这将创建一个图标并根据锚元素是否具有collapsed类来适当切换。

Demo in jsFiddle

---

或者，如果您不喜欢使用psuedo选择器，您可以只包含两个图标，然后根据需要切换其可见性。

Title One
<i class="icon-plus"></i>
<i class="icon-minus"></i>

.accordion-heading .icon-plus { display: none; }
.accordion-heading .icon-minus { display: block; }
.accordion-heading .collapsed .icon-plus { display: block; }
.accordion-heading .collapsed .icon-minus { display: none; }

Demo in jsFiddle

Answer 2

您可以看到一个工作示例，我已根据您的Fiddle进行调整以使其正常工作。

function toggleChevron(e) {
    jQuery(e.target)
    .prev('.accordion-heading')
    .find("i")
    .toggleClass('icon-plus icon-minus');
}
jQuery('#comuniArchivos').on('hidden.bs.collapse', toggleChevron);
jQuery('#comuniArchivos').on('shown.bs.collapse', toggleChevron);

jQuery('.panel-default').on('show.bs.collapse', function() {
    jQuery(this).addClass('active');
});

jQuery('.panel-default').on('hide.bs.collapse', function() {
    jQuery(this).removeClass('active');
});

HTML中的第一个切换需要icon-minus，因为它默认会展开。

Answer 3

这是一个工作bootply，向您展示两个简单的功能。你走在正确的轨道上：

$('#collapseOne').on('show.bs.collapse',function() {
    $(".drop").addClass('glyphicon-minus')
              .removeClass('glyphicon-plus');
});

$('#collapseOne').on('hide.bs.collapse',function() {
    $(".drop").addClass('glyphicon-plus')
              .removeClass('glyphicon-minus');
});