Question

我似乎无法弄清楚为什么这不会在点击时切换图标类。我在点击箭头时显示/隐藏手风琴，但我也想切换字体真棒图标以同时更改箭头（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课程，因为您错过了.，而且您正在尝试查找我怀疑不会考虑prev的{{1}}元素而不是parent考虑siblings，它找不到。因此，请使用.closest获取.panel个父级。以下是变化：

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 - 崩溃时切换图标类

1 个答案: