獲取在hidden / shown.bs.collapse上折疊的元素

Question

我正在開發一個ASP.NET MVC應用程序，完全由我自己制作，並且在學習過程中學習。 我正在制作側邊欄菜單，但我一直試圖制作動畫向上/向下箭頭。 目前，我能得到的最好的結果是，兩個箭頭都打開了hidden.bs.collapse / shown.bs.collapse。 我一直在看這里的一些帖子，但是我無法使其按預期運行。 我已經嘗試過使用類似$('.glyphicon[aria-expanded="true"]')但是並沒有改變行為。

預期：點擊后，“折疊”被刪除，箭頭倒轉。
實際：單擊時，“折疊”被刪除，但兩個/無箭頭都被反轉。

HTML：

<div id="wrapper">
    <div id="sidebar-wrapper">
        <div id="wrapperMenu" class="sidebar-nav">
            <a href="#detailsSubMenu" class="list-group-item" data-toggle="collapse" data-parent="#wrapperMenu">Menu #1<i class="glyphicon glyphicon-arrow-down"></i></a>
            <div class="collapse" id="detailsSubMenu">
                <a href="#" class="list-group-item">A1</a>
                <a href="#" class="list-group-item">A2</a>
                <a href="#" class="list-group-item">A3</a>
            </div>
            <a href="#editSubMenu" class="list-group-item" data-toggle="collapse" data-parent="#wrapperMenu">Menu #2<i class="glyphicon glyphicon-arrow-down"></i></a>
            <div class="collapse" id="editSubMenu">
                <a href="#" class="list-group-item">B1</a>
                <a href="#" class="list-group-item">B2</a>
            </div>
        </div>
    </div>

Js：

$('#wrapperMenu').on('shown.bs.collapse', function() {
    $(".glyphicon").removeClass("glyphicon-arrow-down").addClass("glyphicon-arrow-up");
});
$('#wrapperMenu').on('hidden.bs.collapse', function() {
    $(".glyphicon").removeClass("glyphicon-arrow-up").addClass("glyphicon-arrow-down");
});

小提琴

Answer 1

只需將當前元素定位為子元素，您將找到.glyphicon並在其上使用JQuery toggleClass（）

表格范例

$('[data-toggle="collapse"]').click(function(){
    $(this).children(".glyphicon").toggleClass("glyphicon-arrow-down glyphicon-arrow-up")
});

工作小提琴