JavaScript Onclick Dropdown Menu not working

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);
    });
});
});

Kasyx · Accepted Answer · 2013-02-12 13:45:37Z

1

Try to use blur event:

$('.dropdown').blur(function () {
     var $submenu = (...); // <- get submenu selector here
     $submenu.slideUp();
});

answered Feb 12, 2013 at 13:45

Kasyx

3,19823 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Viktor S. Over a year ago

I was going to say that it will work only for form elements (.dropdown in this case is most likely a div, ul or something like that, not a form element), but as I can see here, focus and blur events may happen on any element if it has tabindex attribute set

Viktor S. · Accepted Answer · 2013-02-12 18:53:09Z

0

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

edited Feb 12, 2013 at 18:53

answered Feb 12, 2013 at 13:51

Viktor S.

12.8k1 gold badge30 silver badges56 bronze badges

5 Comments

Jake Perentosh Over a year ago

This is the closest solution so far... but the menu is still not sliding up. Whatever I click slides up and out of the screen now, with this code. Help!

Viktor S. Over a year ago

see updated code. I assumed that not will work correctly, but that is not what you need. Also, place $(document).click(function(e) { outside of $('.dropdown').click(function() {, otherwise click handler will be added to document each time you open drop down

Jake Perentosh Over a year ago

Following is my page on jsfiddle: jsfiddle.net/2ryWF/2 Notice how anything you click on slides up and goes away; also, the dropdown menu does not go away until you click on each link, one-by-one. However, I want only the whole dropdown menu to slide up when I click anywhere else on the page.

Viktor S. Over a year ago

See this code: jsfiddle.net/2ryWF/5 You had some mess with fiddle itself (HTML had some wrong JS) and I missed that slideUp should be applied to drop down actually, not to target element.

Viktor S. Over a year ago

Additionally, you must check if click happens not inside .sublinks div. Otherwise dropdown will be closed each time some dropdown item is clicked

Daniel Magnusson · Accepted Answer · 2013-02-12 13:45:35Z

0

Looks like your hook for click anywhere is inside the dropdown click hook, try something like this(not tested);

$(function() {
//click on menu(dropdown div)
    $('.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 in document
   $(document).click(function() {
        var $el = $(this);
        $el.not('.dropdown') && $el.slideUp(300);
    });
});

answered Feb 12, 2013 at 13:45

Daniel Magnusson

9,7042 gold badges40 silver badges43 bronze badges

Collectives™ on Stack Overflow

JavaScript Onclick Dropdown Menu not working

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related