Foundation 6 Off-canvas Menu Auto-close After Click

I've been searching how to auto-close off-canvas menu after some menu item is clicked but nothing seems to work. So I followed guide on how to make off-canvas menu on Foundation 6

Solution 1:

You could use the close method on the .off-canvas menu when a link is clicked:

$('.off-canvas a').on('click', function() {
    $('.off-canvas').foundation('close');
});

Click Here for a demo.

Solution 2:

In advance, sorry for my poor english,

Just go through online to figure it out, and finally, the script above that Yass provided is working. But when i inserted Slick slider script in, it no longer worked.

i just found out a solution that worked for me, but maybe there have bug, dunno.

Inside foundation offcanvas documentation, a close button to close the canvas is given, like below showed.

<buttonclass="close-button"aria-label="Close menu"type="button"data-close><spanaria-hidden="true">&times;</span></button>

So I adapted it and put the "data-close" to the link, when i clicked, it scroll to the specific div and close up canvas

And here is the link for more understanding? because i think my explanation sucks

https://jsfiddle.net/mbsj7d7p/