[Dropdown] How to configure the Action on a Dropdown from HTML

[sazzer]

Help Wanted

Problem

I'm trying to use the Dropdown module in an HTML page, and I'm trying to render it as HTML with the minimal amount of Javascript. This works great, but clicking on the menu items causes the text to change.

What I ideally want to do is set the Dropdown action to hide, but to do so only changing the HTML and not needing to change the way that the JavaScript is calling it.

I've got this:

                <div class="ui dropdown">
                    <div class="text">{{ currentUser.name }}</div>
                    <i class="dropdown icon"></i>

                    <div class="menu">
                        <a href="/profile/{{ currentUser.id }}" class="item">Profile</a>
                        <div class="divider"></div>
                        <a href="/logout" class="item">Log out</a>
                    </div>
                </div>
..........
        <script type="text/javascript">
            $('.ui.dropdown').dropdown();
        </script>

And want to change just the HTML to cause the action to change to hide.

Cheers

[lubber-de]

Does a simple dropdown work for you? It does not even need any Javascript at all 🙂
https://fomantic-ui.com/modules/dropdown.html#simple

[sazzer]

That works, yes. I'd managed to overlook it!

However, the usability isn't fantastic :\

This is my menu:

And this is the area of the menu you need to hover to activate the dropdown:

It looks like it should be anywhere in the black box but it's literally just the text. I suspect this is probably just my missing another class though :)

Cheers

[y0hami]

@sazzer Could you try and recreate your menu in a JSFiddle, I can't replicate your issue here https://jsfiddle.net/bgnoj683/

[sazzer]

I can, but actually I've worked it out thanks to yours :) I'd gotten the item class in the wrong place.

Difference between:

            <div class="right menu item">
                <div class="ui simple dropdown">

and

            <div class="right menu">
                <div class="ui simple dropdown item">