Dropdown Container not closing on touch

Hey guys, I am using the Containers / Dropdown. Works great on desktop, but on mobile/tablet (touch) when clicked it opens, but I can’t close it. Here is what I am using:

I tried data-options “on-click” and it is still not working.

Any suggestions?

<button class="button" type="button" data-toggle="category-dropdown" data-close-on-click="true" data-options="clickOpen:true;closeOnClick: true">Browse by Category</button>

<div class="dropdown-pane" id="category-dropdown" data-dropdown data-hover="true" data-hover-pane="true">
...
</div>

Hi,

do you mean data-close-on-click? Not sure where you found on-click.
https://get.foundation/sites/docs/dropdown.html

It was from an old article (using the dropdown menu)…, so, set using this:

<button class="button" type="button" data-toggle="category-dropdown" data-close-on-click="true">Browse by Category</button>

Still doesn’t work on touch (mobile).

Can you provide a full working codepen and the exact version of Foundation that you use?

This might be the issue as hover is also triggered by touchEnd. See https://github.com/foundation/foundation-sites/issues/10730

Hmmm…removed everything and started from scratch… now it is working. Strange. Anyways, thanks for your help @DanielRuf

Probably because of an outdated version, starting with 6.6.0 it should work.
At least it works for me at https://codepen.io/DanielRuf/pen/JjYyrga

So it looks like it is this that causes the conflict. On desktop I want the hover effect (which works), but on mobile/tablet it needs to be a click.

data-hover="true" data-hover-pane="true"

Removing the data-hover and data-hover-pane seems to have fixed the issue. But now, I can’t use the hover effect for desktop. Suggestions? Or does the data-hover attributes need to be in the trigger?

Please see my last comment, this should work with the latest version of Foundation.

1 Like

Right, noted. Thanks @DanielRuf