Nano Hash - криптовалюты, майнинг, программирование

Аккордеон jQuery — события OnCollapse и OnExpand

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

<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
});

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

events jquery accordion
15.02.2012

  • хорошо, нашел. Мне просто нужно проверить, есть ли у аккордеона активный класс состояния... вот так: var open = $(this).find('.ui-state-active').length; 15.02.2012
  • Используйте событие changestart. См. jqueryui.com/demos/accordion/#event-changestart. 15.02.2012
  • Пожалуйста, прочитайте мой вопрос еще раз. проблема не в том, когда запускается событие, а в том, как получить значение, если оно открыто (развернуто) или закрыто (свернуто). А я уже понял ;) 15.02.2012
  • Да, я знаю, но я бы сделал вызов ajax до того, как откроется аккордеон, чтобы контент был там, когда он открыт. Это больше косметический совет. Согласно документации вы можете получить доступ к новому и старому контенту. 15.02.2012

Ответы:


1

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

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

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

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

дополнительные сведения см. в документации по jQuery.

18.08.2013

2

Здесь есть 2 кода, на которые стоит обратить внимание

1.Показать 2.Показать 3.Скрыть 4.Скрыть

Таким образом, код выглядит следующим образом:

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

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

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

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

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

3

Вы можете использовать событие change и опцию active. Так:

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

4

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

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

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
      }
    }

  }

 }
});

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

25.09.2018

6

Согласно этому сообщению SO, 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){}
        }
    });
11.10.2017
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..