jQuery onclick on other element

Question

I have a link for menu profile. It has a class called 'user-button'. When user clicks on it, jquery adds another class to ul list to display it.

$(".user-button").click(function() {
    if(!$(".arrow").hasClass('toggle')) {
        $(".arrow").addClass('toggle');
        $(".profile-action").addClass('display-it');
    } else {
        $(".arrow").removeClass('toggle');
        $(".profile-action").removeClass('display-it');
    }
});

Image reference: http://cl.ly/0R1u3A0h341s2w3a3Y3L

How do i make user click on other element such as body to close '.profile-action'? eg: facebook modaless

Thank you.

Variant · Accepted Answer · 2011-06-27 07:24:27Z

1

Add this to your code:

$('html').click(function() {
     $(".arrow").removeClass('toggle');
     $(".profile-action").removeClass('display-it');
 });

And change your current code to prevent propgation:

$(".user-button").click(function(event) {
    event.stopPropagation();
    if(!$(".arrow").hasClass('toggle')) {
        $(".arrow").addClass('toggle');
        $(".profile-action").addClass('display-it');
    } else {
        $(".arrow").removeClass('toggle');
        $(".profile-action").removeClass('display-it');
    }
});

answered Jun 27, 2011 at 7:24

Variant

17.4k4 gold badges44 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

jQuery onclick on other element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related