Holen Sie sich das Element, das auf ausgeblendet wurde/protected.bs.collapse

Question

Ich arbeite an einer ASP.NET MVC-Anwendung, so dass es vollständig von mir selbst, so wie ich es mache. Ich mache ein Sidebar-Menü und stehe fest, wenn ich versuche, einen animierten Auf-/Ab-Pfeil zu machen. Momentan ist das Beste, was ich bekommen konnte, dass beide/keine Pfeile hidden.bs.collapse/showed.bs.collapse aktivieren. Ich habe mir hier einige Posts angeschaut, aber ich kann es nicht so machen, wie ich es möchte. Ich habe versucht, mit etwas wie $('.glyphicon[aria-expanded="true"]') zu spielen, ändert aber nicht das Verhalten.

Erwartet: Beim Klicken wird "Kollaps" gelöscht und der Pfeil wird invertiert.
Tatsächliche: auf klicken, "Kollaps" ist gelöscht, aber beide/keine Pfeile sind invertiert.

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

Answer 1

einfach aktuelle Element Kind zielen Sie .glyphicon und verwenden JQuery toggleClass() auf sie

Form Beispiel finden

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

working fiddle