Question

I’ve been having some problem with this code

$("#click").bind('mousedown mouseup mouseover', function(e) {
    if(e.type === 'mouseover'){
        $(this).addClass('open'); //works!
    }
    if(e.type === 'mousedown'){
       $(this).removeClass().addClass('closed'); //works!
    }
    if(e.type === 'mouseup'){
       $(this).removeClass().addClass('open');
       // The above line doesn't work :(
    }
});

Demo here
This code only works for mouseover, mousedown and NOT for mouseup. When I uncomment $(this).removeClass().addClass('open'); the mousedown event stops triggering as well.

Anybody have an idea what the problem may be?

Answer 1

Fixed: http://jsfiddle.net/U544t/2/

You need to remove the class you don’t want, then add the class you do. You were ending up with the div having both open and closed, thus it was only showing the closed icon.