Hi Alyssa,
Did you ever get this to work?
What was the final code you used and how did you end up using “this.$element”?
1 Like
Try my code above.
This isn’t working for me - do we need to change any classes in the script??
No. I use this for 9-10 sites with no issues.
Add live URL + Read-only link
No worries - I’ve managed to fix this with native interactions instead. No need for code
I don’t believe it will work with no bugs for all cases (All closing cases - and click scenarios) - but ok. Great.
as well as the interaction for open and close on the toggle all you need to do is add a close interaction to the links in the list
Thanks @benlorimore for explaining why it happens!!!
No code solution
You set the link to #top
You give one of your elements the ID of top
Explained:
The reason your dropdown is not closing is that it can’t find the link it wants to go to (bug).
Result: ML6 | International team of Machine Learning and AI experts (sorry cant share code but believe me… it’s that simple)
Doesnt help. I am already using
(“a”).click(function(){ (“nav”).removeClass(“w–open”);
});
(“a”).click(function(){ (“div”).removeClass(“w–open”);
});
in the form of
(‘.dropdownmenuitem’).each(function(){ (this).click(function(){
(“nav”).removeClass(“w–open”); (“div”).removeClass(“w–open”);
});
});
It closes the dropdown but I need to click twice after to open it again.
Any ideas?
1 Like
.trigger('tap') did not work for me, but .trigger('w-close') and .trigger('w-close.w-dropdown') does, for the most part.
However, it randomly stops working for multiple clicks—seems to be totally inconsistent.
Demo here:
Can someone from the Webflow team please check out this thread / share the dropdown section of the front-end API that allows us to fire events?
4 Likes
I faced similar issue today and I was able to solve it by following these steps. Someone might be able to refactor these processes to make it possible with less.
Initial State
-
Firstly, click on your dropdown object in the Navigator panel and enter the interaction panel.
-
In the interaction panel, click on the + button to create an element trigger.
-
Then, select mouse hover or mouse tap depending on what interaction trigger you want.
-
If you selected mouse hover, you should see a Heading called “On Hover” → Click on “Select an action” → click on “start an animation” → On the same row as you see “Timed Animation”, click the + button.
-
In the input field, give your animation a name, I would suggest something descriptive like “Dropdown show” → On the left side, open your Navigator panel and select the Dropdown List object – The implication of this is that, the Dropdown List is the object you want to animate and its parent, the Dropdown object will serve as the trigger.
-
Back to our interaction panel, on the same row as you see “Actions”, click the + button → Select Hide/Show from the dropdown → In the new sidebar, scroll down till you see the Display block under the Hide/Show header and select the hide visibility icon (it is the last element in the row).
-
Scroll up to the Timing header and click the checkbox to set as initial state. This will make sure the dropdown list is not in view when the page loads.
Dropdown List Appears
-
Now we want to make sure our dropdown list appears when we hover or click
-
Still under our Dropdown show animation, click on the + button to add a new action
-
Again, select Hide/Show from the dropdown and on the sidebar scroll down to the Hide/Show header and select the Block display setting (it appears first in the row).
-
Save the animation.
-
Now if you preview your site, you’ll notice on hover, you see the dropdown list but what happens when you hover out, you expect the dropdown list to disappear but nothing changes. Let’s add that functionality.
Dropdown List disappears
-
Now that we have handled what happens when we hover on the dropdown, let us animate it for when we hover away.
-
For the On hover out interaction, we’ll follow all the steps from step 3 of our initial state section except step 7.
Note: In step 5, you should name your animation something like “Dropdown hide”.
-
Save your animation and preview the site. Works fine!!.
All well and good but the issue we are trying to solve is for when we have wired our dropdown link to navigate to a section of the same page but the dropdown list remains open. To solve this, we just have to create an animation for one of our links and use it across multiple links.
Navigate and Hide
-
Firstly, in the navigator panel, we’ll click on a child of our dropdown list, this should be one of your dropdown links.
-
Then, In the interaction panel, click on the + button to create an element trigger.
-
Select mouse tap → you should see a Heading called “On 1st Click” → Click on “Select an action” → click on “start an animation” → On the same row as you see “Timed Animation”, click the + button.
-
Repeat step 5 of our initial state section and give your animation a clearly descriptive name, I suggest using “Navigate and Hide”.
-
Repeat step 6 of our initial state section.
-
For your other dropdown links, you can reuse the Navigate and Hide animation.
-
Save and preview your site. Does it work as expected? Leave a reply.
1 Like
It’s Work from me I have used it like this.
$('.dropdown-list label').on('click', function () {
$(".w-dropdown").trigger("w-close");
});
2 Likes
Works for me too.
How can I delay this function so that there is time for an interaction animation to show? I.e. I’d like to have an interaction that slides the menu back off-screen before this scrip closes the drop-down. Who would I do that? Thank you
Edit:
This seems to work:
$('.dropdown-list label').on('click', function () {
setTimeout("$('.w-dropdown').trigger('w-close')", 800);
});
You can execute these two lines of code in the exact sequence to close all the dropdowns
Webflow.require('dropdown').preview()
Webflow.require('dropdown').design()
1 Like
Same issue and still not fixed 
I have the solution. The codes from Spirelli are correct, but you need to import the jQuery library. Without the library, the code will not function. Also IMPORTANT, the code will only function on a public site!!!
Here’s my code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.NAME OF YOUR DROPDWON LIST').on('click', function () {
$(".w-dropdown").trigger("w-close");
});
});
</script>
Only replace the “NAME OF YOUR DROPDWON LIST” CSS Class. You find your name of the css class here:
Webflow can not run the code without the jQuery library.
I hope that was helpfull 
Beste regards,
Fabian
1 Like
@Fabian_Colnaric - Webflow loads jQuery on every site. You don’t want to add it again.
Your sure?
If I don’t load it, my code isn’t work