Question

I have a simple toggle that brings down a menu on click and hides it on another click. (there are multiple menus for each user so this code works perfectly… It finds the correct menu based on user id….

$('.abutton').live('click',function(){
    var id = $(this).attr('id');

    $('#amenu'+id).toggle();
    return false;

});

this is the html

<a class="abutton" id="17">Edit</a>
<ul id="amenu17" class="amenuc">
<li><a href="#" id="17"> Delete</a></li></ul>

now if a user forgets to close any menu, i added this code which closes the open drop downs if someone clicks any element on the page

$('html').click(function() {
     $('.amenuc').hide();
});

(for example, another if someone clicks another “edit” button or any where on the page)… but now the toggle is not working ( all it does is, if you click any “edit” button, it will show the menu but if you click the same “edit” button again to close it, it will not close).

What’s wrong with my code? or am I forgetting something?

Answer 1

Try this:

$(document).on('click', function(event) {
     if (!$(event.target).hasClass('abutton')) {  
           $('.amenuc').hide(); 
     }
});