首页 文章

BS3 - 崩溃时切换图标类

提问于
浏览 次
1

我似乎无法弄清楚为什么这不是在点击时切换图标类 . 我在点击箭头时显示/隐藏手风琴，但我也想切换字体真棒图标以同时更改箭头（fa-angle-up / fa-angle-down） .

js fiddle

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);
jquery twitter-bootstrap-3 toggleclass

1 回答

  • 1

    你没有得到 panel 类，因为你错过了 . 加上你试图找到 prev 元素，我怀疑它不会考虑 parent ，而是考虑 siblings ，它不会找到它 . 所以使用 .closest 来获取 .panel parent . 以下是变化：

    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

    回复于

相关问题