获取隐藏/ shown.bs.collapse上折叠的元素

时间:2016-04-07 17:07:51

标签: javascript jquery html css twitter-bootstrap

我正在开发一个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");
});

Fiddle

1 个答案:

答案 0 :(得分:2)

只需定位当前元素子元素,您将找到.glyphicon并在其上使用JQuery toggleClass()

表单示例

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

working fiddle