Question

I have the following html to create a dropdown menu:

<li class="user-section user-section-original">
    <img class="user-image" src="{{ user.get_profile.avatar_small.url }}" height="30" width="30"/>
    <span class="name">{{ user.first_name }} {{ user.last_name.0}}.</span>
</li>
<li class="user-section-dropdown user-section hidden">
    <img class="user-image" src="{{ user.get_profile.avatar_small.url }}" height="30" width="30"/>
    <span class="name">{{ user.first_name }} {{ user.last_name.0}}.</span>
    <a href="{% url logout %}" class="dropdown-item">Log Out</a>
</li>

When a user clicks the menu, it will dropdown, and then if the user clicks it again (or clicks anywhere outside of the dropdown menu), it will hide again.

Here is what I have so far:

$("#header li.user-section").click(function() {
    $("#header .user-section-dropdown").css('display', 'block');
    $("#header .user-section-original").css('display', 'none');
});

This makes the account dropdown appear when the account section is clicked. How would I make it also disappear when it is clicked again or another section on the page is clicked?

Answer 1

You simply need to add click listener to whole document and hide the dropdown if it is shown.

$(document).click(function() {
    if($("#header .user-section-dropdown").css('display') == 'block') {
        $("#header .user-section-dropdown").css('display', 'none');
        $("#header .user-section-original").css('display', 'block');
    }
});

Also, you need to modify the original function so that it handles both cases:

$("#header li.user-section").click(function(e) {
    if($("#header .user-section-dropdown").css('display') == 'none') {
        $("#header .user-section-dropdown").css('display', 'block');
        $("#header .user-section-original").css('display', 'none');
        e.stopPropagation()
    }
    else {
        $("#header .user-section-dropdown").css('display', 'none');
        $("#header .user-section-original").css('display', 'block');
    }
});

e.stopPropagation() is used to not let the document click handler get called.