Menu icon Foundation
Dropdown does not disappear when displaying another dropdown

Hi

I have created 2 links with dropdown and activate the dropdown on hover. In foundation 4, if I hover on the second menu, the first dropdown dissappear. In foundation 5 it doesn't seem that way.

You can see the example here: http://rajasa.com/f5. If you hover the first link and then move on to the next, the first dropdown does not dissappear. Which is a bummer.

How can I make it so that it implements like in Foundation 4?

Hi

I have created 2 links with dropdown and activate the dropdown on hover. In foundation 4, if I hover on the second menu, the first dropdown dissappear. In foundation 5 it doesn't seem that way.

You can see the example here: http://rajasa.com/f5. If you hover the first link and then move on to the next, the first dropdown does not dissappear. Which is a bummer.

How can I make it so that it implements like in Foundation 4?

Aria Rajasa about 6 years ago

no one?

Aria Rajasa about 6 years ago

Ok found the solution, I changed the timeout to 0 so it would disappear right away on mouseleave so that when hovering a new link, the old one goes away instantly. Here's the code to change on foundation.dropdown.js

self.timeout = setTimeout(function () {
            if ($this.data('dropdown')) {
              var settings = $this.data('dropdown-init');
              if (settings.is_hover) self.close.call(self, $('#' + $this.data('dropdown')));
            } else {
              var target = $('[data-dropdown="' + $(this).attr('id') + '"]'),
                  settings = target.data('dropdown-init');
              if (settings.is_hover) self.close.call(self, $this);
            }
          }.bind(this), 150);

Change 150 to 0.

Caroline Waddell about 5 years ago

Thank you for sharing your solution here as well. I've been stuck on this same issue for a while - with 3 dropdowns next to each other. This solved it nicely.

Many thanks!