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

我正在开发一个ASP.NET MVC应用程序,完全由我自己完成,并像我一样学习。 我正在制作侧边栏菜单,而我却试图制作一个动画上/下箭头。 目前,我能得到的最好的是两个/无箭头打开hidden.bs.collapse / shown.bs.collapse。 我一直在看这里的一些post,但我不能让它按照我想要的方式工作。 我尝试过像$('.glyphicon[aria-expanded="true"]')但不会改变行为。

预期:点击后,删除“折叠”并反转箭头。
实际:点击后,“折叠”被删除,但两个/无箭头都被反转。

HTML:

 

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()

forms的例子

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

工作小提琴