Two clicks on dropdown menu

[Rapha (Raphael Zwyer)]

There are other posts with similar issues, but they’re a bit different from what I experience, so none of the solutions suggested helped me.

I have a dropdown menu that lets users choose products by color.
The first click on the Dropdown Toggle “Pick a color” opens the color options list. Clicking on one of the colors in the list filters the items so that only items with that color show, and the dropdown list collapses. So far so good.
But when I then click on the Toggle again, nothing happens – a second click is needed to open the dropdown list again.

How can I do it so that the user doesn’t have to click twice after the first selection/filtering?

Thanks for your help!

https://preview.webflow.com/preview/ornament-is-crime?utm_medium=preview_link&utm_source=designer&utm_content=ornament-is-crime&preview=67d6cc255726c5fa9db030eebf3f2545&workflow=preview

[Rapha (Raphael Zwyer)]

I tried this:

Close dropdown menu

I really dont know why this is not built in - its simply a no brainer that you want to close the dropdown when you click the link. Its astonishing. Anyway, ive tried everything. this is the latest: $(‘.dropdownmenuitem’).on(‘click’, ‘a’, function() { $(‘.dropdownmenu’).triggerHandler(‘click’); }); Doesnt work. Tried the other way to remove the w–open from all div and nav but then I face this annoying issue that I need to click twice on the dropdown to open it again. Please any help really…

and this:

Need to click twice before re-opening drop down

SOLVED: Instead of triggerHandler in the custom code’s last line, I needed trigger, because triggerHandler only targets the first element. – My issue is identical to this one in Close dropdown menu I find the “solution” in Close dropdown menu - #14 by Jd_Bothma as promising but I can’t quite figure out the “right” code to make it work. This is my code: <script> $(".backtomainmenudiv").click(function(){ $(".dropdownlist").removeClass("w--open"); $(".dropdown-toggle").removeCl…

looked at this:

Second click interaction needs 2 clicks to work

Hi, I’m Andre So, I made my webflow website all in one. Meaning, that all the pages are in the “home” page, using “show n’ hide” effect, that pages appear as one click on the link in the menu. The problem is: a double click de menu icon (black square on the right) is required so it appears, after the first click. I couldn’t find out why. I know I have a unnecessary second click interaction somewhere, but I couldn’t find it. Can somebody help me? I’m sorry if I couldn’t make myself clear, engl…

Can’t figure it out!
Can anyone help?
Thank you!

[Rapha (Raphael Zwyer)]

Sorry, I just realized that the visual I provided above earlier may have been confusing.
I just replaced/updated it. I hope it helps clarify what my issues are.

Anyone?

[Aleksandra (Aleksandra Jaguscik)]

Maybe running $(".w-dropdown").trigger("w-close") in custom code on your dropdown’s options would be helpful?

[Rapha (Raphael Zwyer)]

Hey, thank you, Aleksandra – will definitely try that. Will let you know how that goes.

[Rapha (Raphael Zwyer)]

Hi Aleksandra,

It’s been a while, I was caught up with another project.
Coming back to this, can you please elaborate a bit more how I would apply your solution in my case? I’m not sure how I call that specific class and where the code would go (embed?).

Below is the link again.
Don’t get turned off by the black opener, was a client request I couldn’t talk them out of – yet. Just scroll down to the catalog section.

[https://preview.webflow.com/preview/ornament-is-crime?utm_medium=preview_link&utm_source=designer&utm_content=ornament-is-crime&preview=67d6cc255726c5fa9db030eebf3f2545&workflow=preview]

Thank you!