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.

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