获取在hidden / shown.bs.collapse上折叠的元素

问题描述

我正在处理一个ASP.NET MVC应用程序，使它完全由自己，学习，因为我这样做。我正在做一个侧边栏菜单，我被卡住试图做一个动画向上/向下箭头。目前，我能得到的最好的是两个/无箭头打开hidden.bs.collapse / shown.bs.collapse。我一直在看这里的一些职位，但我不能让它工作，因为我想要。我已经尝试过类似 $（'glyphicon [aria-expanded =true]'），但不改变行为。

I'm working on an ASP.NET MVC application, making it completely by myself, learning as I do it. I am making a sidebar menu and I'm stuck trying to make an animated up/down arrow. Currently, the best I could get is that both/none arrows turn on hidden.bs.collapse/shown.bs.collapse. I've been looking at some posts here but I cannot make it work as I want it to. I have tried playing with something like $('.glyphicon[aria-expanded="true"]') but doesn't change the behavior.

预期：点击后，折叠已删除，箭头反向。

实际： collapse已删除，但两个/无箭头都反转。

Expected: on click, "collapse" is deleted and the arrow inverted.
Actual: on click, "collapse" is deleted but both/none arrows are inverted.

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");
});

推荐答案

glyphicon 并在其上使用JQuery toggleClass（）

simply target current element child you will find .glyphicon and use JQuery toggleClass() on it

表单示例

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

这篇关于获取在hidden / shown.bs.collapse上折叠的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！