Closing a dropdown after selecting a menu item

I have a dropdown menu including a number of menu items triggering onclick events. Here is a simplified example:
<a class="dropdown-item" dmx-on:click="qm1.set('subject','art');">Art</a>
The advantage of using this method rather than a proper link is there is no page refresh and the result is very smooth. The query is run and the menu closes.

This works very well except on small devices when the menu is collapsed. In this case, after an item is selected and the query runs, the menu remains open. This is a problem particuarly on a phone for example where the menu may obscure much of the content; it may not be apparent that the query has run and the new content has been loaded.

Can anyone suggest a way to make the menu close in this situation? Given the menu closes automatically in other circumstances, is this perhaps a bug?

Hello Tom,
Where is this dropdown located? Is it in a navbar?
Which part of it is not closing - the dropdown menu itself, or the navbar?

can you paste the code of your nav/navbar so we can check this?

Yes, it’s in a navbar. Sorry - I wasn’t very clear in my description. The dropdown closes, but the navbar and menu items remain open. I would like the navbar to collapse, back to just the hamburger button.

That’s the default behavior of the Bootstrap 4 Navbar.
When the page reloads, the navbar will display closed, as you reload the whole page and its initial state is closed.

You can close the navbar collapse using the data-toggle attributes. Add this to your dropdown item:

 data-toggle="collapse" data-target=".navbar-collapse.show"

so it becomes:

<a class="dropdown-item" dmx-on:click="qm1.set('subject','art');"  data-toggle="collapse" data-target=".navbar-collapse.show">Art</a>

then it will close the navbar on mobile devices.

2 Likes

Great - that’s done the trick. I use this a lot and have been meaning to find a solution. That’s made my day. :slightly_smiling_face:

1 Like