Daraltılmış öğeyi gizli/gösterilmiş.bs.collapse

Question

Bir ASP.NET MVC uygulamasında çalışıyorum, tamamen kendi başıma yapıyorum, öğrendiğim gibi. Bir kenar çubuğu menüsü yapıyorum ve animasyonlu bir yukarı/aşağı ok yapmaya çalışıyorum. Şu anda alabildiğim en iyi şey, her iki/yok okunun hidden.bs.collapse/shown.bs.collapse üzerinde açılmasından kaynaklanıyor. Burada bazı yayınlara bakıyordum ama istediğim gibi çalışamıyorum. $('.glyphicon[aria-expanded="true"]') gibi bir şeyle oynamayı denedim, ancak davranışı değiştirmiyor.

Tıklanma: tıklama, "daraltma" silindi ve ok tersine çevrildi.
Gerçek: tıklama, "daraltma" silinmiş, ancak her iki/hiçbiri okları ters çevrilmiştir.

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

basitçe .glyphicon bulacaksınız akım eleman çocuğu hedef ve

formu örneği JQuery toggleClass() kullanın

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

working fiddle