Question

I’ve built a dropdown menu that uses a slideUp event if the menu itself or anywhere in the body is clicked:

$('html, .currentPage').click(function() { 
    $('.currentMenu').slideUp('fast', function() { myFunction(); });
});

I also have a function inside the slideUp event callback.

However, my problem is that the function is being called on html or .currentPage click whether the slideUp event has occurred or not.

How can I make it so the function(); ONLY happens if the slideUp event runs?

Answer 1

$('html, .currentPage').click(function() { 
    var $currentMenu = $('.currentMenu');

    if($currentMenu.is(':visible')) { 
        $currentMenu.slideUp('fast', function() { myFunction(); });
    }
});

even more

$('html, .currentPage').click(function() { 
    var $currentMenu = $('.currentMenu');

    if($currentMenu.is(':visible')) { 
        $currentMenu.slideUp('fast', myFunction);
    }
});

You can also optionally use $currentMenu.css('display') != 'none' instead of $currentMenu.is(':visible').

The options are suggested based on the actual behaviour of slideUp(), described in the official documentation at http://api.jquery.com/slideUp/.