javascript - 如何在 javascript 中手动切换 Foundation 5 下拉菜单(在 emberjs 应用程序中)？

Question

我在 ember js 应用程序中正确绑定(bind)下拉列表时遇到问题，因为我在列表内部单击时有 action 处理程序并且基础事件发生冲突。

模板名称:

<a data-dropdown="groupDrop" id="groupDropdownLink" class="button radius tiny success dropdown">
   Move Selected To Group ({{selectedCount}})
</a>
<br>
<ul id="groupDrop" data-dropdown-content class="f-dropdown">
  {{#each eventGroups}}
    <li {{action 'moveToGroup' this}}><a>{{name}}</a></li>
  {{/each}}
</ul>

当我运行 $(document).foundation() 时，它会覆盖操作处理程序，而当我删除它时，它不会触发下拉菜单。

我认为我需要做的是向 a 标记添加一些操作处理程序，然后让它打开下拉列表，这样我就不能使用基础处理程序了。

Answer 1

触发下拉菜单需要使用的函数是Foundation.libs.dropdown.toggle

你传入下 zipper 接的 jQuery 对象来切换它

你可以这样解决:

模板:

<a data-dropdown="groupDrop" {{action 'showDropdown'}} id="groupDropdownLink" class="button radius tiny success dropdown">
   Move Selected To Group ({{selectedCount}})
</a>
<br>
<ul id="groupDrop" data-dropdown-content class="f-dropdown">
  {{#each eventGroups}}
    <li {{action 'moveToGroup' this}}><a>{{name}}</a></li>
  {{/each}}
</ul>

Controller :

Ea.GroupGuestsController = Em.ArrayController.extend
  actions:

    showDropdown: ->
      Foundation.libs.dropdown.toggle($('#groupDropdownLink'))