[Manjuriano]

Мне нужно создать меню, которое бы показывалось при нажатии, скрывалось при нажатии на него второй раз и скрывалось при нажатии на фон вокруг. Я имею вот такой код, но последняя его часть (скрывать при клике на фоне) почему-то отключает первую (еще раз нажать на меню, чтобы его скрыть).

<!-- Кнопка -->
<a href="#" class="share-button">Share</a>

<!-- Появляющееся меню, скрытое в CSS по умолчанию -->
<div class="share-menu">
<a class="share-menu-link" href="#">Twitter</a>
</div>

$(document).ready(function() {
	$(".share-button").click(function(e) {          
		e.preventDefault();
    	$(".share-menu").toggle();
		$(".share-button").toggleClass("menu-open");
    });
    
    $(".share-menu").mouseup(function() {
				return false;
	});
	
	$(document).mouseup(function(e) {

				$(".share-button").removeClass("menu-open");
				$(".share-menu").hide();
				$(".share-menu").css("display","none");	
	});	
});

Подскажите почему они мешают друг другу?