i wan' to hide #button_ul div when click outside of div anywhere and i'm done with below code but problem is that once i click button it doesn't slideToggle i wan't to toggle #button_ul div when i click #edit_btn div

Code:
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
	$('#edit_btn').click(function(){
		$("#button_ul").slideToggle(0);
	});
	$("body").mouseup(function(e)
	{
		var button_ul = $("#button_ul");
		if (!button_ul.is(e.target) && button_ul.has(e.target).length === 0)
		{
			$("#edit_btn a").css("background-color" , "rgba(153,153,153,0.6)");
			button_ul.css("display" , "none")
		}
	});
});

</script>
<style type="text/css">
#edit_btn{
	border: thin solid #000;
	background-color: #666;
	padding: 5px;
	width: 140px;
	text-align: center;
}
#edit_btn a{
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFF;
	font-weight: bold;
}

#button_ul {
	border: thin solid #333;
	font-family: Arial, Helvetica, sans-serif;
	list-style-type: none;
	margin: 0px;
	border-radius: 0px 0px 4px 4px;
	background-color: #ddd;
	width: 135px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 5px;
	display: none;
}
#link1 {
	border: 0px;
	width: 100px;
	height: 20px;
	color: #C03;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#link1:hover {
	text-decoration: underline;
}

#link2 {
	border: 0px;
	width: 100px;
	height: 20px;
	color: #C03;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#link2:hover {
	text-decoration: underline;
}
</style>
</head>

<body>
<div id="edit_btn"><a href="#">Edit Profile Picture</a></div>
<ul id="button_ul">
<li>
<a id="link1" href="#">Upload Picture</a>
</li>
<li>
<a id="link2" href="#">Remove Picture</a>
</li>
</ul>
</body>
</html>