jQuery akordeon - OnCollapse i OnExpand wydarzenia

Question

Mam akordeon z jednego tytułu jak ten

<div class="accordion" id="accordion_acquired_services"> 
    <h3><a href="#">Acquired services</a></h3> 
    <table id="tbl_acquired_services"> 
     <tbody></tbody> 
    </table> 
</div> 

Co chciałbym to powiązać zdarzenie na akordeonie otwartym i akordeon blisko ...

Właściwie co chciałbym osiągnąć to zrobić żądania aJAX, które zapełnić treścią akordeonu za każdym razem, gdy jest rozwinięty ...

dziwo nie ma onExpand/onCollapse wydarzenia

tej pory mam to

$("#accordion_acquired_services").bind("accordionchange", function(event, ui) { 
    $('#tbl_acquired_services').html(''); 
    //trigger ajax 
}); 

Ale to wyzwala w obu przypadkach, gdy jest zwinięty i gdy jest on rozszerzony ... skąd mam wiedzieć, który jest który?

Answer 1

Spróbuj tego rozwiązania:

var opened = $(this).find('.ui-state-active').length; 

Answer 2

Można użyć zdarzenia change oraz opcję active. W ten sposób:

$('#accordion').bind('accordionchange', 
    function() { 
     alert('Active tab index: ' + $(this).accordion('option', 'active')) 
    }); 

Answer 3

Zmiany czasu i tak jest jquery. Kopiuj/wklej z thread

$("#accordion").accordion({ activate: function(event, ui) { 
      alert(ui.newHeader.text()); 
    } 
}); 

innego zdarzenia:

$("#accordion").accordion({ beforeActivate: function(event, ui) { 
     alert(ui.newHeader.text());   
    } 
    }); 

take a look at jQuerys docs więcej szczegółów

Answer 4

Istnieją 2 kody tutaj zauważyć

1.Show 2.Shown 3 .Ukryj 4.Ukryj

Więc kod idzie jak poniżej

$('#accordion').on('show.bs.collapse', function() { 
//on clicking the accordion menu 
}); 

$('#accordion').on('hide.bs.collapse', function() { 
//on clicking the accordion menu 
}); 

Więc teraz, jeśli używamy Ukrytych i pokazane możemy wywołać po zawartość menu akordeon zamyka lub otwiera całkowicie

$('#accordion').on('shown.bs.collapse', function() { 
//after menu opens 
}); 

$('#accordion').on('hidden.bs.collapse', function() { 
//after menu closes 
}); 

Answer 5

Według this SO post, jQuery robi” • ujawnić zmiany w taki sam sposób jak powyżej. Jest to skrypt napisany przeze mnie, który działa z najnowszą biblioteką jQuery, która pobiera identyfikator akordeonu po otwarciu i aktualizuje adres URL z tym hashem.

$(accordionSelText).accordion({ 
     activate: function(event, ui) { 

      var accordionId=ui.newHeader.closest('.accordion').attr('id'); // Grabs the id of the accordion 

      try { 
        if (accordionId) { 
         window.location.hash = accordionId; 
         console.log('Active accordion index: ' + accordionId); 
        } 
      }catch(e){} 
     } 
    });