BS3 - 折叠时切换图标 class

Question

我似乎不明白为什么这不会在点击时切换图标 class。我是showing/hiding点击箭头的手风琴，但我也想切换字体真棒图标以同时更改箭头（fa-angle-up / fa-angle-down）。

html:

<ul id="archivegroup">
    <li class="panel">
        <a href="#alist0" data-parent="#archivegroup" data-toggle="collapse" class="accordion-toggle" aria-expanded="true"><i class="fa fa-angle-down"></i></a> <a href="/archive/2015">2015</a> <span class="count">(2)</span>
        <ul class="collapse in" id="alist0" aria-expanded="true" style="">
            <li>
                <a href="/archive/2015-09">September</a> <span class="count">(1)</span>
            </li>
            <li>
                <a href="/archive/2015-05">May</a> <span class="count">(1)</span>
            </li>
        </ul>
    </li>
    <li class="panel">
        <a href="#alist1" data-parent="#archivegroup" data-toggle="collapse" class="accordion-toggle collapsed" aria-expanded="false"><i class="fa fa-angle-up"></i></a> <a href="/archive/2013">2013</a> <span class="count">(1)</span>
        <ul class="collapse " id="alist1" aria-expanded="false">
            <li>
                <a href="/2013-09">September</a> <span class="count">(1)</span>
            </li>
        </ul>
    </li>
    <li class="panel">
        <a href="#alist2" data-parent="#archivegroup" data-toggle="collapse" class="accordion-toggle collapsed" aria-expanded="false"><i class="fa fa-angle-up"></i></a> <a href="/archive/2010">2010</a> <span class="count">(1)</span>
        <ul class="collapse " id="alist2" aria-expanded="false">
            <li>
                <a href="/archive/2010-09">September</a> <span class="count">(1)</span>
            </li>
        </ul>
    </li>
</ul>

js:

function toggleChevron(e) {
    $(e.target)
        .prev('panel')
        .find("i.fa")
        .toggleClass('fa-angle-up fa-angle-down');
}
$('#archivegroup').on('hidden.bs.collapse', toggleChevron);
$('#archivegroup').on('shown.bs.collapse', toggleChevron);

Answer 1

您没有得到 panel class，因为您错过了 .，而且您正在尝试寻找 prev 我怀疑不会考虑的元素 parent 而不是它认为 siblings，它不会找到。所以用.closest得到.panelparent。以下是更改：

function toggleChevron(e) {
    $(e.target).closest('.panel').find('i.fa')
        .toggleClass('fa-angle-up fa-angle-down');
}
$('#archivegroup').on('hidden.bs.collapse', toggleChevron);
$('#archivegroup').on('shown.bs.collapse', toggleChevron);

DEMO

BS3 - 折叠时切换图标 class

BS3 - toggle icon class on collapse

jquery

toggleclass

twitter-bootstrap-3