Question

I am trying to make an onclick dropdown menu for a website. I want my .sublink elements to slide down when I click on the .dropdown element and then for the .sublink to slide back up when I click on anywhere else on the page.

The menu drops down, but it does not slide back up when I click somewhere else on the website.

Following is the code that I currently have for the menu. Can someone please help me on this? Thank you!

$(function() {
$('.dropdown').click(function() {
    $('.sublinks').stop(false, true).hide();

    var submenu = $(this).parent().next();

    submenu.css({
        position: 'absolute',
        top: $(this).offset().top + $(this).height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex: 1000
    });

    submenu.stop().slideDown(300);



   //click anywhere outside the menu
   $(document).click(function() {
        var $el = $(this);
        $el.not('.dropdown') && $el.slideUp(300);
    });
});
});

Answer 1

In your code, which is for click anywhere in document, this will point to a document, not to an actual element where event happened. You can modify your code like below (use e.target instead of this):

 $(function() {
    $('.dropdown').click(function() {
        $('.sublinks').stop(false, true).hide();

        var submenu = $(this).parent().next();

        submenu.css({
            position: 'absolute',
            top: $(this).offset().top + $(this).height() + 'px',
            left: $(this).offset().left + 'px',
            zIndex: 1000
        });

        submenu.stop().slideDown(300);
    });
    //click anywhere outside the menu
    $(document).click(function(e) {        
            var $el = $(e.target);
            if(!$el.hasClass('.dropdown') && $el.closest(".dropdown").length == 0 && !$el.hasClass('.sublinks') && $el.closest(".sublinks").length == 0)
                $('.sublinks:visible').slideUp(300);
     });
});

See also $el.closest(".dropdown").length == 0 it is to ensure that click happens not in child element of .dropdown

Here is a demo for it. Click in different locations and check console: http://jsfiddle.net/2ryWF/. You will find that this always points to document