Zurb Foundation 6: запускать событие при открытии меню аккордеона?

Question

Я использую меню аккордеона Zurb Foundation 6. Как я могу активировать функцию JQuery при открытии элемента аккордеона? Я думаю, что это может иметь какое-то отношение к down.zf.accordionMenu, но я не нашел никаких примеров.

Я узнал из этого сообщения , что могу проверить, есть ли меню аккордеона открыты, но что, если я хочу только проверить, когда открывается определенный элемент c? Вот код для всех из них:

jQuery('#id_of_accordion').on('down.zf.accordion', function() {
  //run code here
});

Answer 1

Вы получаете элемент в качестве второго параметра от вашего слушателя.

См. https://github.com/foundation/foundation-sites/blob/develop/js/foundation.accordion.js#L282

this.$element.trigger('down.zf.accordion', [$target]);

https://api.jquery.com/trigger/

See the documentation for the handler at https://api.jquery.com/on/

Take a look at the console when you use this code:

<ul class="accordion" data-accordion>
  <li id="accordion-1" class="accordion-item is-active" data-accordion-item>
    <!-- Accordion tab title -->
    <a href="#" class="accordion-title">Accordion 1</a>

    <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
    <div class="accordion-content" id="accordion-content-1" data-tab-content>
      <p>Panel 1. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
   <li id="accordion-2" class="accordion-item" data-accordion-item>
    <!-- Accordion tab title -->
    <a href="#" class="accordion-title">Accordion 2</a>

    <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
    <div class="accordion-content" id="accordion-content-2" data-tab-content>
      <p>Panel 2. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
  <!-- ... -->
</ul>

$(document).foundation();

$('[data-accordion]').on('down.zf.accordion', function(event, element) {
  console.log(element);
  if($(element).attr('id') === 'accordion-content-2') {
    console.log('accordion 2 opened');
  }
});

См. Код https://codepen.io/DanielRuf/pen/OJNPWog