How can you manually toggle a Foundation 5 dropdown in javascript (inside an emberjs app)?

问题

I am having issues getting a dropdown to be bound properly in an ember js app because I have action handlers on click inside of the list and the foundation events are conflicting.

Template name:

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

When I run $(document).foundation() it overrides the action handlers, and when I remove that it doesn't trigger the dropdown.

What I think I need to do is add some action handler to the a tag and then have it open up the dropdown, so I can not use the foundation handlers.

回答1:

The function you need to use to trigger the dropdown is Foundation.libs.dropdown.toggle

You pass in a jQuery object of the dropdown link to toggle it

You can solve it like this:

template:

<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'))

来源：https://stackoverflow.com/questions/20909350/how-can-you-manually-toggle-a-foundation-5-dropdown-in-javascript-inside-an-emb