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查看codepen