Zurb Foundation 6：手风琴菜单打开时触发事件？

Question

我正在使用 Zurb Foundation 6 Accordion 菜单。打开手风琴项时如何触发 JQuery 函数？我认为这可能与down.zf.accordionMenu有关，但我还没有找到任何例子。

我从 this post 中了解到我可以测试是否打开了任何手风琴菜单，但是如果我只想测试特定项目何时打开怎么办？这是所有这些的代码：

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/

请参阅 https://api.jquery.com/on/ 处的处理程序文档

使用这段代码时看一下控制台：

<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

Zurb Foundation 6：手风琴菜单打开时触发事件？

Zurb Foundation 6: Trigger event when accordion menu opens?

jquery

zurb-foundation