CODEWITHSUNDEEP
performancezurb-foundation
TheCrabPirate
TheCrabPirate

Reputation: 43

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

When clicking on a link in a zurb foundation 4 dropdown, the link does not close the drop down. What is the best way to do this systematically across the site?

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

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

Upvotes: 4

Views: 3363

Answers (3)

MarianoC
MarianoC

Reputation: 351

I use this to change the behavior of all dropdown buttons in a page in zurb foundation 3.2.5. Haven't tested it in 4, but as it's a different method here it goes.

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

Upvotes: 0

Andrew
Andrew

Reputation: 5715

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

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

Upvotes: 0

user1209398
user1209398

Reputation:

You probably already corrected it in your own code but it will work better this way if you have more than one dropdown on your webpage: 

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

Upvotes: 5

Related Questions