CODEWITHSUNDEEP
javascriptjqueryjquery-events
Dylan Cross
Dylan Cross

Reputation: 5986

jQuery hide dropdown when clicked anywhere but menu

I'm trying to make it so that my dropdown menu shows when you click a button, and hides when you click anywhere except the dropdown menu.

I have some code working, as far as not closing when you click the menu, however when you click the document when the menu is closed, it shows the menu, so it continuously toggles no matter where you click.

$(document).click(function(event) {
    if ($(event.target).parents().index($('.notification-container')) == -1) {
        if ($('.notification-container').is(":visible")) {
            $('.notification-container').animate({
                "margin-top": "-15px"
            }, 75, function() {
                $(this).fadeOut(75)
            });
        } else {
            //This should only show when you click: ".notification-button" not document
            $('.notification-container').show().animate({
                "margin-top": "0px"
            }, 75);
        }
    }
});

Upvotes: 25

Views: 43371

Answers (8)

epoch
epoch

Reputation: 16595

jQuery's closest() function can be used to see if the click is not within the menu:

$('body').click(function(e) {
    if ($(e.target).closest('.notification-container').length === 0) {
        // close/animate your div
    }
});

Upvotes: 35

Vishnu Choudhary
Vishnu Choudhary

Reputation: 421

I am using a very simple code for this as :-

$(document).click(function(e){

   if($(e.target).closest('#dropdownID').length != 0) return false;
   $('#dropdownID').hide();
});

Hope it will useful.

Thanks!!

Upvotes: 5

Bipin Chandra Tripathi
Bipin Chandra Tripathi

Reputation: 2620

you can do something like this if your item is not clicked then hide its dropping list in case of drop down 

$(':not(#country)').click(function() {
     $('#countrylist').hide();
});

Upvotes: 7

Mandeep Pasbola
Mandeep Pasbola

Reputation: 2639

Try this :

// The code to close the dropdown
$(document).click(function() {
    ...
});

// The code to open the dropdown 
$(".drop-down").click(function() {
    ...
    return false;
});

Upvotes: 2

Dylan Cross
Dylan Cross

Reputation: 5986

This is what I've decided to use, it's a nice little jQuery plugin that works with little code.

Here's the plugin: http://benalman.com/projects/jquery-outside-events-plugin/

This is the code that makes my above code in my question work.

$(document).ready(function(){
    $(".notification-button").click(function(){
        $('.notification-container').toggle().animate({"margin-top":"0px"}, 75); 
    }); 

    $('.notification-wrapper').bind('clickoutside', function (event) {
        $('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)});
    });
});

Upvotes: 1

Stefan
Stefan

Reputation: 5672

This might not be a complete solution but I´ve created a demo to help you out. Let me know it´s not working as you´d expect.

$(document).click(function(e) {

    var isModalBox = (e.target.className == 'modal-box');

    if (!isModalBox) {
        $('.modal-box:visible').animate({
            "margin-top": "-15px"
        }, 75, function() {
            $(this).fadeOut(75);
        });
    }
});

$('a').click(function(e) {
    e.stopPropagation(); // Important if you´d like other links to work as usual.
});

$('#temp-button').click(function(e) {
    e.preventDefault();
    $('.modal-box').show().animate({
        "margin-top": "0px"
    }, 75);
});

Upvotes: 2

redmoon7777
redmoon7777

Reputation: 4526

try something like:

$(document).click(function(event) { 

if($(event.target).parents().index($('.notification-container')) == -1) {
    if($('.notification-container').is(":visible")) {
        $('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)});
    }   
}        
});

$(".notification-button").click(function(event){
    event.stopPropagation();
    $('.notification-container').show().animate({"margin-top":"0px"}, 75);
});

Upvotes: 1

Kristoffer Svanmark
Kristoffer Svanmark

Reputation: 778

I usually do like this:

$('.drop-down').click(function () {
    // The code to open the dropdown

    $('body').click(function () {
        // The code to close the dropdown
    });
});

So put your body (elsewhere) click function inside the drop-down open click function.

Upvotes: 4

Related Questions