jQuery accordion - события OnCollapse и OnExpand

Question

У меня есть аккордеон с таким названием:

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

Мне бы хотелось связать событие при открытии аккордеона и закрытии аккордеона ...

Собственно, что я 'Я хотел бы сделать, это сделать ajax-запрос, который будет заполнять содержимое аккордеона при каждом его расширении ...

как ни странно, нет никаких событий onExpand / onCollapse

, пока у меня есть это

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

Но это срабатывает в обоих случаях, когда оно сворачивается и когда расширяется ... как узнать, что есть что?

Answer 1

Время меняется, как и jquery.Скопируйте / вставьте из нить

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

другое событие:

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

посмотрите документацию jQuerys для получения более подробной информации

Answer 2

Здесь есть 2 кода, чтобы заметитьтеперь, если мы используем Hidden и Shown, мы можем запустить после закрытия содержимого аккордеонного меню или полностью открыть

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

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

Answer 3

Вы можете использовать событие change и параметр active.Как это:

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

Answer 4

Попробуйте это решение:

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

Answer 5

Я знаю, что это старая тема, но это действительно помогло мне

$( "#Accordion" ).accordion({
collapsible: true,
heightStyle: "content",
activate: function(event, ui) {

  if(ui.newHeader[0]){

    if( ui.newHeader[0].id =='ID of h3'){
        // run code here
      }
    }

  }

 }
});

Выполнение этой проверки, если есть новый объект заголовка, который не генерируется, когда вы закрываете аккордеон, только когда вы открываете его.

Answer 6

Согласно этой публикации , jQuery не предоставляет изменения так же, как описано выше.Это сценарий, который я написал, который работает с самой последней библиотекой jQuery, которая при открытии захватывает идентификатор аккордеона и обновляет URL с этим хешем.

$(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){}
        }
    });