CODEWITHSUNDEEP
javascriptjquerycss
David542
David542

Reputation: 110502

JQuery hiding a dropdown menu when clicking another element

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?

Upvotes: 0

Views: 2737

Answers (5)

shrekuu
shrekuu

Reputation: 2272

simple, just use stopPropagation on your menu, and give 'document' click event 'removeClass' method;
tip: in order to move the whole body to left/rigtht, you man move the 'body' element together with you menu; I just applied this method. took me ONE day!! ONE day. 

$('.button').bind('click', function(e) {
    e.stopPropagation();
    $('.menu').toggleClass('slide');
});


// slide out when click other parts of current page

$(document).click(function(){
    $('.menu').removeClass('slide-in');
});

Upvotes: 0

OptimusCrime
OptimusCrime

Reputation: 14863

I know the correct answer has been given, but I'd like to share this Plugin with you: http://benalman.com/projects/jquery-outside-events-plugin/

It's a simple plugin which binds on clicks outside an element. Within this bind-function you simply check if your element is visible or hidden. It's visible, hide it.

Upvotes: 0

jwerre
jwerre

Reputation: 9624

I think the easiest way would be to toggle a class instead of applying the style directly.

$("#header li.user-section").click(function() {
    $("#header .user-section-original").toggleClass("hidden");
});

Then in your css make an non-semantic class like

.hidden { display:none; }

To make it go away when you click anywhere else try:

$(​window).click(function(e){
    var $target = $("#header .user-section-original"); 
    if( $target.hasClass("hidden");
        $target.removeClass("hidden");
})​

Upvotes: 1

loler
loler

Reputation: 2587

On click function, you can add following code

$('li[class$="dropdown"]').css('display', 'none')

this will set all li elements which are ending with dorpdown display:none and then you can show the specified dropdown menu display:block. Finally u will have something like

$(".specificliclass").click(function(){
$('li[class$="dropdown"]').css('display', 'none');
$('.specificliclass').css('display', 'block')

});

Upvotes: 0

Krzysztof Bujniewicz
Krzysztof Bujniewicz

Reputation: 2417

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.

Upvotes: 0

Related Questions