It seems like you're looking to toggle the 'active' class whenever the 'clickme' link is clicked, and also remove the class when clicking anywhere on the document. Here's how you can achieve this:
1) The Issue:
The reason your current code isn't working as expected is because you are using both mouseup and click events. Since mouseup is triggered just before click on the same element, the 'active' class gets added and removed in quick succession.
Every time you click on 'myLink', it triggers a mouseup event on the document which removes the 'active' class, while the click event adds the class back. This results in the class always being added and the yellow color background always showing up.
2) The Solution:
To fix this issue, try using click instead of mouseup for binding the document event, and add event.stopPropagation in the click handler of 'myLink' to prevent the propagation of events.
Here's the updated fiddle: https://jsfiddle.net/tgowvehx/5/
Updated code snippet:
$('.mylink1').click(function(evt){
evt.stopPropagation();
if ($('.div1').hasClass('active')){
$('.div1').removeClass('active');
} else {
$('.div1').addClass('active');
}
});
$(document).click(function (e)
{
var container = $(".div1");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$('.div1').removeClass('active');
}
});