What is the best way to close the dropdown menu in zurb Foundation 4 when clicking on a link?

Question

When you click on a link in the zurb bottom drop-down list, the link does not close the drop-down list. What is the best way to do this systematically on a site?

I created the following function to solve this problem. Is this the best way to do this, or am I missing something?

$('.f-dropdown').click(function(){ if ($(this).hasClass('open')) { $('span[data-dropdown="'+$(".f-dropdown").attr('id')+'"]').trigger('click'); } }); 

Answer 1

You may have already adjusted it in your own code, but it will work better if you have several drop-down lists on your web page:

 $('.f-dropdown').click(function() { if ($(this).hasClass('open')) { $('span[data-dropdown="'+$(this).attr('id')+'"]').trigger('click'); } }); 

Answer 2

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

Link: https://github.com/zurb/foundation/issues/1831#issuecomment-15133817

Answer 3

I use this to change the behavior of all the drop-down buttons on a page in the zurb 3.2.5 database. Did not test it at 4, but since this is a different method, it goes.

 $(document).ready(function () { $('.button.dropdown').find('li').click(function () { $(this).parents('.button.dropdown')[0].click(); }); });