Semantic-ui: Closing `simple dropdown` without jQuery

[norbertpy]

I'm trying to use CSS-Only Semantic UI for my app and it has been very good so far. One problem I have is to close the dropdown active or hover state on each item click. Currently, it doesn't close if I don't include jQuery and semantic.min.js. But this should be fairly trivial.

The documentation says there is an active class with which I can open the dropdown. But is there any inactive class I can use to close it down and cancel the hover effect?

Thanks.

[jlukic]

Just remove the active class to close the dropdown.

To disable the dropdown from opening on hover add the class disabled

[norbertpy]

@jlukic thanks for your reply but the this doesn't work due to the fact that by clicking on items the CSS :hover effect is still in place. So even without active the dropdown stays open. With disabled it will not work at all.

[btbjosh]

I'm having the same trouble on mobile devices. :hover is not a big deal on desktop and wanted (for obvious reasons) but the tap on mobile becomes an active :hover pseudo-class. You can't remove it with JS on click of a link in the menu.

What's the proposed solution for this, use a .disabled simple dropdown on mobile only??

[norbertpy]

@btbjosh as you can see the issue was closed. Meaning it wasn't worthy of attention and I don't know how a disabled dropdown is considered a solution.

[btbjosh]

@norbertpy I ended up adopting the full js-powered dropdown so I could control its behavior better between mobile/desktop. A bit overkill, but an obvious solution that I overlooked and wasn't even mentioned. :)