I am using this zurb-foundation dropdown button - .5.3/ponents/dropdown_buttons.html

But I have an additional requirement to close the dropdown list when a user clicks outside the dropdown button itself or when the user clicks on an item in the dropdown list, so I need a way to programmatically close an open dropdown list on an on-click event.

What's the javascript call I need to make to programmatically close an open dropdown list?

I am using this zurb-foundation dropdown button - http://foundation.zurb./sites/docs/v/5.5.3/ponents/dropdown_buttons.html

But I have an additional requirement to close the dropdown list when a user clicks outside the dropdown button itself or when the user clicks on an item in the dropdown list, so I need a way to programmatically close an open dropdown list on an on-click event.

What's the javascript call I need to make to programmatically close an open dropdown list?

• javascript
• zurb-foundation

7 Answers 7

After some searching here is a slightly cleaner way of doing it:

Foundation.libs.dropdown.close($('#id_of_dropdown_list'));

Old question but this worked for me.

$(document).foundation('dropdown', 'close', $('.f-dropdown'));

In Foundation 6.2, you can do something like:

$('.dropdown-pane').foundation('close');

For reference: http://foundation.zurb./sites/docs/dropdown.html#close

With Foundation 6.3.0 if you want to close the dropdown list when you click outside the dropdown button, just add the data attribute data-close-on-click="true" in the dropdown pane. I have this in my code:

<div class="small warning button-group">
    <a class="dropdown button arrow-only float-right" data-toggle="dropdown-menu-1">
        <span class="show-for-sr">Show menu</span>
    </a>
    <a class="button float-right" href="/vacancies/show">View</a>

    <div class="dropdown-pane bottom" id="dropdown-menu-1" data-dropdown data-close-on-click="true">
        <a href="">Edit</a>
    </div>
</div>

More: https://foundation.zurb./sites/docs/dropdown.html#js-options

Here's one way to do it:-

$("#id_of_dropdown").removeClass("open").css("left", "-99999px"); 

You also need the data-dropdown-content attribute attached to the dropdown ul element.

Reference: https://github./zurb/foundation/issues/1831#issuement-15133817

The programmatic methods close/open/toggle exist for the Dropdown element, as you can see here. These can be triggered as suggested by allicarn.

However for the DropdownMenu element, no close/open methods exist. In case anyone needs those, you can simulate the opening/closing click:

document.querySelector('.dropdown .value').click()